Flutter styling: how to organize your look and feel

A guideline about how to organize your code to manage look & feel features

Photo by Dmytro Lopatin on Unsplash

If you work with Flutter you know that there is a Theme you can use to share colors and fonts over your App. You can go into the Flutter official docs and see how it works:

Use themes to share colors and font styles

This class allow you to set a theme to your MaterialApp, let’s see the example:

  @override
  Widget build(BuildContext context) {
    const appName = 'Custom Themes';

    return MaterialApp(
      title: appName,
      theme: ThemeData(
        useMaterial3: true,

        // Define the default brightness and colors.
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.purple,
          brightness: Brightness.dark,
        ),

        // Define the default `TextTheme`. Use this to specify the default
        // text styling for headlines, titles, bodies of text, and more.
        textTheme: TextTheme(
          displayLarge: const TextStyle(
            fontSize: 72,
            fontWeight: FontWeight.bold,
          ),
          titleLarge: GoogleFonts.oswald(
            fontSize: 30,
            fontStyle: FontStyle.italic,
          ),
          bodyMedium: GoogleFonts.merriweather(),
          displaySmall: GoogleFonts.pacifico(),
        ),
      ),
      home: const MyHomePage(
        title: appName,
      ),
    );
  }
}

Then you can set that theme to any widget:

      Text(
            'Text with a background color',
            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                  color: Theme.of(context).colorScheme.onPrimary,
                ),
          ),

A simple way to have styles organized and not died trying

When I started to use it I didn’t feel comfortable, too many chars to set an style to a Text, I thought: “I would like to have a simple way to set a style of a widget”. So that was why I created some classes to organize the styles.

So I created one class for each kind of styles:

1. MyAppIcons: to handle icons
2. MyAppFonts: to handle fonts
3. MyAppStyles: to handle text and button styles
4. MyAppColors: to handle colors

Each class contains all you need regarding icons, fonts, colors and styles. Wherever you want to set an style, an icon, a color or a font, you will use one of that classes. For example, to set the style to a Text widget:

      Text(
            'Text with a background color',
             style: MyAppStyles().textTitle,
          ),

It is simpler than the previous example, isn’t it? And MyAppStyles class looks like this:

class MyAppStyles {

  TextStyle textTitle =>
      TextStyle(
          fontSize: 16.0,
          fontFamily: MyAppFonts().fontFamily,
          fontWeight: FontWeight.w500,
          color: MyAppColors().bodyForegroundColor
      );

 ...
}

As you can see I use font and color from my other style classes. Let’s see how those classes look:

MyAppFonts:

class MyAppFonts{

  String? get _fontPoppins => "poppins";
  String? get _fontBeVietnamePro => "BeVietnamPro";

  String? get fontFamily => _fontBeVietnamePro;
  String? get fontFooter => _fontPoppins;
  String? get fontHeader => _fontBeVietnamePro;
  
  ...
}

MyAppColors:

class MyAppColors{

  Color get bodyBackgroundColor => Color(int.parse("0xFFffffff");
  
  Color get bodyForegroundColor => Color(int.parse("0xFF000000");
  
  ...

}

MyAppIcons:

class MyAppIcons{

  Widget get iconMenu =>const Icon(Icons.menu);
  Widget get iconClose =>const Icon(Icons.close);
  Widget get iconForward =>const Icon(Icons.arrow_forward_ios);
  Widget get iconRefresh =>const Icon(Icons.refresh);
  
  ...

}

So that’s all folks. There are a few simple classes that wrap all regarding styles.

Also you can combine these classes with Theme. You can define your theme like this:

@override
  Widget build(BuildContext context) {
    const appName = 'Custom Themes';

    return MaterialApp(
      title: appName,
      theme: ThemeData(
        useMaterial3: true,

        // Define the default brightness and colors.
        colorScheme: ColorScheme.fromSeed(
          seedColor: MyAppColors().seedColor,
          brightness: MyAppColors().brightness,
        ),

        // Define the default `TextTheme`. Use this to specify the default
        // text styling for headlines, titles, bodies of text, and more.
        textTheme: TextTheme(
          displayLarge: MyAppStyles().displayLarge,
          titleLarge: MyAppFonts().titleLarge,
          bodyMedium: MyAppFonts().bodyMedium,
          displaySmall: MyAppFonts().displaySmall,
        ),
      ),
      home: const MyHomePage(
        title: appName,
      ),
    );
  }
}

Conclusion

1. Create a class for each kind of style you want to manage
2. Use your styling class instead of a simple font, style, icon or color
3. Maintain your code will be fast like a charm.

Thanks for reading, Clap if you like it!

Photo by Wil Stewart on Unsplash

Let me know your comments below.