Flutter for Line Of Business app – Theming

When you receive a design from a UX designer, from for example Zeplin, everything is specified:

• Colors
• Fonts (Name, Size, Style)
• Margins and padding of the elements

As in the Flutter counter-sample project, I started in my project with changing the primary color:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

But then I quickly realized that the primary color is a specific value in a range of colors, a ColorSwatch.

 static const MaterialColor blue = MaterialColor(
    _bluePrimaryValue,
    <int, Color>{
       50: Color(0xFFE3F2FD),
      100: Color(0xFFBBDEFB),
      200: Color(0xFF90CAF9),
      300: Color(0xFF64B5F6),
      400: Color(0xFF42A5F5),
      500: Color(_bluePrimaryValue),
      600: Color(0xFF1E88E5),
      700: Color(0xFF1976D2),
      800: Color(0xFF1565C0),
      900: Color(0xFF0D47A1),
    },
  );
  static const int _bluePrimaryValue = 0xFF2196F3;

Such a simple task, changing the primary color, was just not so simple anymore. How do I generate a range of colors from one specific color that was specified by the UX designer?

After some googling, I found the website: http://mcg.mbitson.com/. Here you can delegate the burden of creating a ColorSwatch. If you specify the primary color, this website will generate the color variants for you. Great!

I ended up copying the code of Colors.blue and changed it with the values from that website. Together with some other specific colors, I put that into a class:

class CompanyColor {
  static const MaterialColor primaryColor = MaterialColor(
    _primaryColor,
    <int, Color>{
      50: Color(0xffe1e4e8),
      100: Color(0xffb3bcc6),
      200: Color(0xff8090a0),
      300: Color(0xff4d647a),
      400: Color(0xff27425e),
      500: Color(_primaryColor),
      600: Color(0xff011d3b),
      700: Color(0xff011832),
      800: Color(0xff01142a),
      900: Color(0xff000b1c),
    },
  );

  static const int _primaryColor = 0xff012141;

  static const Color companyBlue = Color(0xff063a65);
  static const Color companyOrange = Color(0xfff98c1b);
  static const Color companyWhite = Color(0xffffffff);
  static const Color companyBlueLight = Color(0xff8fa1b7);
  static const Color companyBlueText = Color(0xff124370);
  static const Color companyRed = Color(0xffcd3631);
  static const Color companyGreen = Color(0xff008a57);
  static const Color companyYellow = Color(0xfffcc634);
  static const Color companyGrey = Color(0xffe4e8ed);
}

This was good. Now I had one place to put all the custom colors. But this was still not good enough. The UX designer has designed a consistent user interface, but I was repeating myself all over the place.

Referencing the colors by hand did not feel like applying the D.R.Y. principle. There had to be a better way. And, of course, there was: “Make a custom theme”. And the good news is that a theme is not only for colors but also for fonts, padding, etc.

Changing the theme is quite easy. Identify the object that you want to customize application-wide. Drill down to the Flutter source code.

For example for changing the cursor color:

  /// The color to use when painting the cursor.
  ///
  /// Defaults to [ThemeData.cursorColor] or [CupertinoTheme.primaryColor]
  /// depending on [ThemeData.platform].
  final Color cursorColor;

You can change that in a custom theme like this:

ThemeData companyTheme(BuildContext context) {
  var theme = Theme.of(context);
  return theme.copyWith(
    primaryColor: CompanyColor.primaryColor,
    iconTheme: theme.iconTheme.copyWith(
      color: CompanyColor.companyWhite,
    ),
    cursorColor: CompanyColor.companyOrange,
    inputDecorationTheme: theme.inputDecorationTheme.copyWith(
        contentPadding: EdgeInsets.only(bottom: 7.0, top: 4.0),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: CompanyColor.underLineInputColor,
          ),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: CompanyColor.underLineInputColor,
          ),
        ),
        focusedErrorBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: CompanyColor.companyPink,
          ),
        ),
        errorBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: CompanyColor.companyPink,
          ),
        ),
        errorStyle: TextStyle(
          color: CompanyColor.companyRed,
          fontFamily: 'Lato-Bold',
          fontSize: 14.0,
        )),
  );
}

Apply this theme in your MaterialApp:

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: providers(isZebra: isZebra, scanWithCamera: scanWithCamera),
      child: Builder(
        builder: (BuildContext context) => MaterialApp(
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
          ],
          supportedLocales: [const Locale('nl')],
          title: 'Ferwerda BV',
          theme: companyTheme(context),
          navigatorObservers: [
            Provider.of<RouteObserver>(
              context,
              listen: false,
            ),
          ],
          home: S005StartupPage(),
        ),
      ),
    );
  }

That’s it. Now you have all theming in one place.