📱 15 / 100 Days Of Flutter, Kate's edition — deep dive into ThemeData, a wonderland of state managers and LayoutBuilder

Missed me? I'm back with some great news and updates! 👋

Deep dive into ThemeData

As part of the MDC codelab series, I keep learning Material Design basics. This time I went beyond simple primary colour customisation and themed different aspects of the app from font to buttons to inputs using the ThemeData constructor.

There are millions of properties, each with its own type like IconThemeData or ElevatedButtonThemeData. As Mike Rydstrom points out in his blog, configuring a consistent theme for a Flutter app can be challenging. There are 12 ways to create ThemeData. Some widgets don't respect common ThemeData configuration and require special tuning. That's why Mike created a more consistent ThemeData constructor as an external package flex_color_scheme. Something to try in the future!

It requires time to learn all the tricks for customising ThemeData but it's clearly a better approach than specifying custom styles per widget.

The wonderland of Flutter state managers

Thanks to Mike again for a great infographic on Flutter state managers.

From React world, I'm familiar with the concept of state management. Redux, a very popular React state manager, is one of my daily tools. I haven't entered the wonderland of Flutter state managers but I already know it will be fun!

I'm going to learn the Provider myself and Riverpod on the Flutter course from Andrea Bizzotto (paid). Those are the first two options in the official documentation and I think it should be enough to start.

Widget of the day - LayoutBuilder

MDC-103 codelab provides the code of a custom grid layout that is based on a horizontal list view.

I tried horizontal list view myself in one of my previous experiments and it didn't work. I think it's because I didn't add the secret source called LayoutBuilder!

The grid from the codelab example uses SizedBox and LayoutBuilder to keep the sizes of child elements appropriate for the horizontal ListView. See the code here.

Custom grid with overlay guidelines enabled:

Summary

In the past month, I've got a good feel of Flutter, its widgets and theming basics. It's time to dig deeper.

I'm excited to join Andrea's Flutter course where I'm going to learn about Flutter app architecture, state management, automated testing and more!

If you are taking it too, don't hesitate to say hi on Slack, Twitter, or Discord. I'm @kalabro there 👋