Displaying Material Base Components in Widgetbook

Published in

Widgetbook

3 min readNov 22, 2023

Styling Material Widgets can be tricky. Using the widgetbook_base_components mason brick you can get an overview inside Widgetbook how they will look, feel and behave

Buttons from widgetbook_base_components in the Widgetbook Groceries Example

Struggling with styling ThemeData

Personally I am a big fan of using the default Material Widgets in Flutter Apps as they are easy to use, offer great support for Accessibility and relying on theme is great if you are onboarding new team members as they can just use the default blocks without having to make sure they use the correct widget.

However one big caveat with this can be what Mike Rydstrom put into great words during his workshop at Flutter & Friends (Material for the Workshop can be found here)

Flutter Material theming is fun and easy — but tedious

This really resonated with me as that basically reflects my experience with it. Adjusting ThemeData to match a given Design or just to your preference can indeed be tricky to get all the nuances right. However things like Mike’s Theme Playground and flex_color_scheme can really help you nail your ThemeData. When you have your Theme just right and you are able to just use Material Widgets without having to do custom styling when using them it feels great to use, is quick and ensures visual consistency between your uses of these Widgets.

The idea

widgetbook_base_components is a mason brick that generates UseCases for your Widgetbook to show you how these widgets would appear and behave in your App.

In the first version the following components are supported: Buttons, TextStyles, Controls, Card, AlertDialog, Indicators, Chips, TextFields, ListTile, BottomNavigationBar

You might notice that these UseCases in Widgetbook have a lot more info than you are normally used to. This is because the idea behind widgetbook_base_components is to get a quick overview of how certain Material Widget Groups like buttons/switches/etc behave if used in an app only relying on the style set by the encapsulting ThemeData.

For some examples you can also check out a Widgetbook with these components here:

https://abausg.github.io/bricks/widgetbook_base_components/web/

Alright. Enough talking show me what I can do with it.

Using the brick

Note: I am assuming you already have setup Widgetbook in your project. If not check out the official documentation https://docs.widgetbook.io/

Follow the installation steps for mason if you haven’t by running
dart pub global activate mason_cli mason init
Add the widgetbook_base_components brick using
mason add widgetbook_base_components
"Make" the brick using mason make widgetbook_base_components
Run dart run build_runner build (ignore this if you are using watch )
Check your Widgetbook for the new Base Components 🎉

Chips created by widgetbook_base_components on https://abausg.github.io/bricks/widgetbook_base_components/web/

Next Steps

I think seeing the different Variants side by side offers a great way of grasping how your App might look for the provided ThemeData

I am well aware that this is only a small subset of Material Widgets that are supported but I think it is a great start. If you are missing a specific Widget feel free to open a PR.

For thoughts or any more questions reach out to me on X/Twitter

Thanks

Many thanks to Roaa, Lucas and Tim from Widgetbook for the Feedback on the Brick.

Also big thanks to Mike! His work for everything Material is phenomenal and his Theme Playground was a huge inspiration for this. You should follow him on X/Twitter to always get the latest news about Material and Flutter!