0 purchases
Description:
idea widget preview
About #
The aim of this plugin (pub package and IDE plugin) is to assist Flutter developers creating reusable UI components that are not tied to business logic.
General #
This repository contains:
the open source code of the publicly available idea_widget_preview pub package
usage documentation and required legal information for the closed-source Widget Preview for Flutter plugin.
Demo #
Here is an example what the plugin looks like in action:
https://user-images.githubusercontent.com/17592224/198992173-ff00ec49-47bc-478f-91f4-1667d1a78813.mov
(Widgets used in the demo were retrieved from here.)
Table Of Contents #
About
General
Demo
Docs
Getting started
Prerequisites
Your first preview
Transform file
Plugin ui
Docs #
Getting started #
Prerequisites #
Install Flutter on your machine
Add flutter tool to your path (preferred)
Add idea_widget_preview pub package to your project
Install Widget Preview for Flutter plugin in your Jetbrains IDE
Recommended:
Add lib/widget.preview.dart to your .gitignore
Your first preview #
This is what a typical setup looks like for a widget:
import 'package:flutter/material.dart';
import 'package:idea_widget_preview/preview.dart';
// 1) Your widget
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 200,
color: Colors.amber,
);
}
}
// 2) The corresponding preview
class ExamplePreview extends PreviewProvider {
@override
List<Preview> get previews => [
// 3) Individual declarations
Preview(
title: "Simple",
builder: (BuildContext context) {
return Example();
},
)
];
}
copied to clipboard
As you can see from the previous code, there are 3 key things to keep in mind when declaring your preview:
Widget.
Public class declaration that derives from PreviewProvider and has a no-arg constructor.
Individual declarations you want to see in your Preview.
Transform file #
(Advanced topic. It is worth reading it to know about this feature.)
If you prefer to keep the dependency to idea_widget_preview minimal, or you already have a storybook configured in your project, there is alternative solution to extending or implementing the PreviewProvider class.
You can provide your custom implementation that converts your existing class to PreviewProvider. In the following example, StoryProvider is your custom class.
abstract class StoryProvider {
List<Story> get stories;
}
copied to clipboard
class ConvertToPreviews implements ToPreviewProvider<StoryProvider> {
@override
PreviewProvider toPreviewProvider(StoryProvider value) {
return PreviewProvider.createAnonymous(
previews: value.stories
.map(
(story) => Preview(
title: story.name,
builder: story.builder,
),
)
.toList(),
);
}
}
copied to clipboard
With that in place, you can create your previews like this:
class MealsViewStory implements StoryProvider {
@override
final List<Story> stories = [
Story(
name: 'Widget/Breakfast',
description: 'A preview about the breakfast.',
builder: (context) =>
MealsView(
mealsListData: MealsListData.tabIconsList[0],
),
),
// ...
];
}
copied to clipboard
Very important:
You need to configure in IDEA settings (under Widget Preview for Flutter > Transform file) the path to the file where your implementation of ToPreviewProvider resides in.
Plugin ui #
Refresh: This button reloads the current preview.
This is the preview panel you can open in any .dart file. The content is context-dependent and in case of errors, or missing implementation, you will see a message instead of the preview.
Additional logs view of the running processes. If your project contains errors, the preview cannot be rendered. These 2 readonly console views provides further info about issues. (Ideally, IDEA and the Dart plugin will highlight the issues in your project anyway.)
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
