Support for Preview feature in Flutter

Help General
, ,
1

So I was working on SwiftUI last week and found the #Preview feature which is similar to the @Preview feature in Jetpack Compose. So I thought it would be great to have this feature in Flutter in-build DevTool as well. Although we can argue that hot-reload is fast enough to make this all work, but here are the reasons I would love to have them:

  1. Prototype a small widget in isolation: This is especially helpful in big projects where you need to design a small widget that is deeply embedded within a user workflow. In order to test with hot-reload, you need to go through that workflow and test it. There are tool like Storybooks, but then I would have to create all my reusable theme and style components to be there and also keep them up to date.

  2. Live test with different inherited models: SwiftUI provides a .environment modifier which takes the model we want to use in our SwiftUI View. A similar idea could be used in Flutter for an InheritedWidget or a third-party package that supports it.

  3. Interaction in small widgets: The #Preview feature in SwiftUI is interactive. I can test small UI changes easily in the preview itself. Like show/hide and toggles.

I am aware that there are some third-party packages available for similar things, but they require some additional Dart code to set up inside the app.

2 Likes
2

This does exist for IntelliJ: Widget Preview for Flutter Plugin for JetBrains IDEs | JetBrains Marketplace

And for VSCode: Flutter Preview - Visual Studio Marketplace

3 Likes
3

I suggest subscribing to Add support to define widget preview and see it in the IDE when developing · Issue #115704 · flutter/flutter · GitHub.

tldr is that the team is investigating this very closely - stay tuned for the updates.

9 Likes
4

You should take a look at WidgetBook… they were on Observable Flutter yesterday, and got me excited to go dig deeper.

4 Likes
5

I also recommend WidgetBook. You get a list of all widgets prepared for preview, can switch locals, devices, change texts, bools, select from option lists and more. Is quite convenient for developing widgets in isolation.

2 Likes
6

Yes, I am aware of that. I think it’s good for prototyping in isolation, but what I am really talking about is the ability to prototype within my codebase using existing styles I have and also the core UI components I have in the codebase.

7
8

Apparently, you can have your widgetbook as part of your app, or even adjacent to your app in a monorepo (makes splitting out for re-use later easier). And when you do that, your widgetbook can adopt the Themes etc from the host project.

2 Likes
9

This is a cool push, as @mraleph posted, such suggestion has been open for a while now but I think, the guys are still investigating

But to add it, most developers like jackpack compose because preview

Believing in that too, I created a package for that some years back. GitHub - rexthecoder/flutter-preview

But I think with more hands on deck flutter can achieve that at the core level.

10

I am working on a project where we use Monarch. It’s easy to setup, it’s similar to React’s StoryBook (and I guess WidgetBook), the code can reside in your app repo in a stories/ directory and reference your themes and so forth. Not sure what preview offers that a package like Monarch doesn’t—maybe a little less setup?

Hot reload is so fast that I generally use that for tweaking the UI layout within a workflow. However, when working on themes, Monarch is awesome since you can toggle back and forth between themes and components so easily. In that case, it’s a big win over hot reload.

3 Likes
11

First time I hear about Monarch. Definitely worth checking out

12

Pawan has video for it https://www.youtube.com/watch?v=5xPBdt17AqU

1 Like