Monarch is inspired by Storybook. Conceptually, Monarch stories are the same as Storybook stories. If you are familiar with Storybook, then Monarch will feel very familiar.
You can write stories for every interesting or relevant state your widgets may have.
Stories in code
Stories are simple functions that return a
Widget and take zero arguments. You
don't need to import the monarch package to write a story.
Also, since stories are plain functions, they can be re-used from your widget tests.
Where to put stories
Monarch will look for stories in dart files that end with
You can place stories inside the
stories directory or, if you prefer, you can
place them inside your
lib directory. The only requirement is that story files
should end in
monarch init command creates the file
can open that file to see how those stories are written. After you run
monarch run you should see those stories in the Monarch desktop app.
You should see something like this:
Feel free to edit those stories to see their visual state change. Monarch will automatically reload your changes.
Stories for your own widgets
Let's say your project has a couple of widgets files. One is inside
and one inside
To write stories for those widgets, you just need to import them into a
*_stories.dart file, then you can write stories for those widgets.
Widget someButton => MyFancyButton(...);
Widget anotherButton => MyFancyButton(...);
Widget someCard => MyFancyCard(...);
Widget anotherCard => MyFancyCard(...);
After you run
monarch run you should see those stories in the Monarch desktop
Stories for quick prototypes
You can write stories that use the Flutter widgets directly. It is a good way to prototype new views.
For example, in a file that ends in
*_stories.dart, you can add these stories:
Widget foo() => Text('foo', style: TextStyle(fontSize: 50));
Widget bar() => Icon(Icons.pets, size: 50);
Widget foobar() => Center(child: Column(children: [foo(), bar()]));