Custom Theme/Colors in Flutter

  • Find the right color combination.
  • Retrieve the hexadecimal codes of these colors
  • Integrate these colors into the theme.
  • Test the rendering in the application.
<!--?xml version="1.0" encoding="UTF-8"?--> <resources> <color name="primaryColor">#b71c1c</color> <color name="primaryLightColor">#f05545</color> <color name="primaryDarkColor">#7f0000</color> <color name="primaryTextColor">#ffffff</color> </resources>
import 'package:flutter/material.dart'; const PrimaryColor = const Color(0xFFb71c1c); const PrimaryColorLight = const Color(0xFFf05545); const PrimaryColorDark = const Color(0xFF7f0000); const SecondaryColor = const Color(0xFFb2dfdb); const SecondaryColorLight = const Color(0xFFe5ffff); const SecondaryColorDark = const Color(0xFF82ada9); const Background = const Color(0xFFfffdf7); const TextColor = const Color(0xFFffffff); class MyTheme { static final ThemeData defaultTheme = _buildMyTheme(); static ThemeData _buildMyTheme() { final ThemeData base = ThemeData.light(); return base.copyWith( accentColor: SecondaryColor, accentColorBrightness: Brightness.dark, primaryColor: PrimaryColor, primaryColorDark: PrimaryColorDark, primaryColorLight: PrimaryColorLight, primaryColorBrightness: Brightness.dark, buttonTheme: base.buttonTheme.copyWith( buttonColor: SecondaryColor, textTheme: ButtonTextTheme.primary, ), scaffoldBackgroundColor: Background, cardColor: Background, textSelectionColor: PrimaryColorLight, backgroundColor: Background, textTheme: base.textTheme.copyWith( title: base.textTheme.title.copyWith(color: TextColor), body1: base.textTheme.body1.copyWith(color: TextColor), body2: base.textTheme.body2.copyWith(color: TextColor) ), ); } }
const PrimaryColor = const Color(0xFFb71c1c); const PrimaryColorLight = const Color(0xFFf05545); const PrimaryColorDark = const Color(0xFF7f0000); const SecondaryColor = const Color(0xFFb2dfdb); const SecondaryColorLight = const Color(0xFFe5ffff); const SecondaryColorDark = const Color(0xFF82ada9); const Background = const Color(0xFFfffdf7); const TextColor = const Color(0xFFffffff);
import './themes/color.dart';
return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.red, ), home: MyHomePage(title: 'Flutter application MR'), );
return MaterialApp( title: 'Flutter Demo', theme: MyTheme.defaultTheme, home: MyHomePage(title: 'Flutter application MR'), );
return MaterialApp( title: 'Flutter Demo', theme: MyTheme.defaultTheme, debugShowCheckedModeBanner: false, home: MyHomePage(title: 'Flutter application MR'), );

Webography and Inspirations

Translate by Andy A.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store