Create samples of your widgets and preview them in real time
This project is experimental but safe to use as not code is added during compilation. It won't be stable until Flutter web or desktop reaches a stable version too.
preview package
to your flutter project. Instructions hereOpen a dart file in vscode and the preview button will appear
Click the button to launch Flutter Preview
If a devices is not active yet, it will ask you to select the device where you want to run Flutter Preview. Read more about how to choose a device to run Flutter Preview.
Using macos? We use the local network layer to communicate between the preview and the damenon service. Macos limits all network requets by default and so you will need to allow it during debug by adding:
com.apple.security.network.client to macos/Runner/DebugProfile.entitlements
A vscode snippet is availabe for creating a preview, just type preview
and it will appear.
Create a new class that extends PreviewProvider
class MyPreview extends PreviewProvider {
List<Preview> get previews {
return [
];
}
}
Add as many Preview widgets as samples you want to display
List<Preview> get previews {
return [
Preview(
frame: Frames.ipadPro12,
child: MyApp(),
),
Preview(
frame: Frames.iphoneX,
child: MyApp(),
),
];
}
And and the examples will appear in the preview window as soon as you save your file.
They will appear there every time you come back to that file.
The Preview
widget allows you to give default values that will impact your widget inside. The current availabe values are:
Also you can set a update mode for each preview from hot-reload to hot-restart;
You can use multiple classes that extend PreviewProvider
and they will be displayed in different tabs.
By default the name of the tab will be the class name but you can override the title
param to customize it.
PreviewProvider allows you to group different Previews
in a single file. While this can be enough for most, you might want to create your own previews.
For that you can extend any widget that extends StatelessWidget
and make it implement the mixin Previewer
;
class MyCustomPreview extends StatelessWidget with Previewer {
@override
Widget build(BuildContext context) {
return Container();
}
}
It is important to add with Previewer
always when extending any class, otherwise it won't be recognized by Flutter Preview.
A already built-in custom provider is ResizablePreviewProvider
that gives you the freedom to resize a widget to see how it could look in different scenarios.
class Resizable extends ResizablePreviewProvider with Previewer {
@override
Preview get preview {
return Preview(
mode: UpdateMode.hotReload,
child: MusicCard(
title: 'Blond',
singer: 'Frank Ocean',
image: PreviewImage.asset('preview_assets/cover1.jpg'),
onTap: () => {},
),
);
}
}
You can build any other previews or use any packages if you respect this two important rules
with Previewer
Let's see a cool example using the device_preview package
```dart class DevicePreviewProvider extends StatelessWidget with Previewer { @override String get title => 'Device Preview'; @override Widget build(BuildContext context) { return DevicePreview( builder: (context) => MyApp(), ); } } ``` | ![]() |
Adding sample assets to your flutter can increase the app without no need.
For images, you can NetworkImage as before.
But if you want to use local images, don't add them to your flutter project!
You can use PreviewImage instead.
//DON'T
AssetImage('images/example.png')
//DO
PreviewImage('debug_images/example.png')
# pubspec.yaml
assets:
images/dart.png
Other assets will be supported soon
Create a new issue and I will take it a look