Skip to main content

Introduction

Your job is hard​

As your Flutter app grows, its user interface becomes complex because your widgets need to support more use cases. You may end up with hundreds of widgets which depend on each other. And then you notice that changes to one widget affect many others.

Complex User Interface

On top of all that, you have to make sure your UI works across multiple devices, text scales, languages, and themes. And you also have to worry about logic, data, performance, animations, accessibility, etc.

Building complex user interfaces is hard.

Isolating your UI will help​

If you could build your UI in isolation you could reduce the complexity of your job. When you isolate your UI, you can run it without running your app or your backend, which means that you can easily build, test, and debug complex UIs.

However, it is not enough to isolate your UI. You also need a tool that can preview your UI in isolation.

This is why we built Monarch—to help you build Flutter widgets in isolation.

Isolated Widgets

Monarch will help​

Monarch proposes a simple way to isolate your UI and then it previews your UI in the most isolated way possible.

To use Monarch, you first write stories. A story is a function which returns a widget in a visual state you care about. Your stories represent your isolated UI.

You can then use Monarch to preview the stories you have written. You can then see your widgets across different devices, text scales, languages, themes, and more. All without an emulator.

Monarch makes it simple to mock hard-to-reach edge cases, pinpoint bugs, and build responsive UIs. All without running your app or backend.

In the long run, Monarch will help you build complex user interfaces in a sustainable manner, and it will also help your team work better together.

Isolated Widgets

Other Benefits​

  • It is very simple to use Monarch. No need to learn how to use special classes, fancy concepts or modify your production code.
  • Monarch stories are very similar to Storybook stories. If you are familiar with Storybook, then Monarch will feel very familiar.
  • Monarch doesn't affect your production code thus your app bundle size stays the same.
  • All your stories are reusable from your widget tests. Our users love this.
  • Monarch runs natively on your desktop platform. You can use it side-by-side with your IDE.