monarch 0.0.24 monarch: ^0.0.24 copied to clipboard
Code generator for Monarch. Monarch lets you generate stories for your widgets.
Build high-quality flutter widgets faster.
Monarch is a tool for developing widgets in isolation. It makes building beautiful widgets a more pleasant and faster experience. It is inspired by Storybook.
Monarch allows you to browse a widget library, view the different states of each widget, and interactively develop widgets.
First, you write stories for the widgets you want to test. A story is a
function that returns a widget in a specific state. For example, if you have
a widget called
MyFancyCard that takes in a
title, then you could write
these two stories:
Widget shortTitle() => MyFancyCard(title: 'A'); Widget longTitle() => MyFancyCard(title: 'Much longer title');
Then, you will run the Monarch task runner which will generate the code needed to display your stories in the Monarch desktop app. You can now see your stories in isolation, without all of you app's dependencies.
This is the alpha release of Monarch. We only support flutter development on macOS for now.
build_runnerto your project dev_dependencies:
dev_dependencies: monarch: ^0.0.23 build_runner: ^1.7.1
flutter pub geton your project.
Create a build.yaml file at the top level of your project and add the following:
targets: $default: sources: - lib/** - stories/**
- Download the Monarch tools, which include the task runner and desktop app.
Download them into your directory of choice using
curl, for example:
$ cd ~/development $ curl -O https://dropsource-monarch.s3.amazonaws.com/dist/alpha/monarch_tools_0.0.44.zip $ unzip monarch_tools_0.0.44.zip
Write stories #
To write stories just create a
stories directory at the top level of your
project. Then start adding files that end in
You could also add stories inside your
lib directory. The only requirement
is that story files should end in
Stories are functions that return a
Widget. Therefore, your stories code
doesn't require a dependency to Monarch. Also, since stories are plain functions,
they can be re-used from your widget tests.
Run the task runner to see your stories #
The monarch_task_runner will prepare your stories so you can use them in the Monarch desktop app.
To run the monarch_task_runner, enter this command from inside your project directory.
You should see the task runner working and eventually opening the Monarch app.
Once the app opens, you should see your stories listed on screen. You can select each story to see how it would render. You can also select different device resolutions and themes
You can now add more stories. As you add more stories, the task runner will automatically detect the changes and reload the stories in the app.
The task runner will generate a
.monarch directory in your project. You
can gitignore that directory.
# in .gitignore .monarch/
Your stories can render using your app's themes. If you want see themes in
Monarch then you need to add the
package:monarch_annotations to your dependencies:
dependencies: monarch_annotations: ^0.0.9
Then, you can annotate your themes:
import 'package:monarch_annotations/monarch_annotations.dart'; ... @MonarchTheme('Fancy Theme') final fancyTheme = ThemeData(...);
When you run the desktop app, you should be able to select your theme in the Theme dropdown.
If you experience any issues while running the task runner, you can run it in verbose mode.
$ ~/path/to/monarch_task_runner --verbose