Flutter styling: how to organize your look and feel

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

Bernardo Iribarne
Nerd For Tech
3 min readMar 7, 2024

--

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:

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.

--

--

Nerd For Tech
Nerd For Tech

Published in Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Bernardo Iribarne
Bernardo Iribarne

Written by Bernardo Iribarne

Passionate about design patterns, frameworks and well practices. Becoming a Flutter expert

Responses (2)