https://github.com/andrasferenczi/idea_widget_preview
IDEA Plugin and Pub Package for a better UI development experience.
https://github.com/andrasferenczi/idea_widget_preview
component dart flutter idea
Last synced: 12 months ago
JSON representation
IDEA Plugin and Pub Package for a better UI development experience.
- Host: GitHub
- URL: https://github.com/andrasferenczi/idea_widget_preview
- Owner: andrasferenczi
- License: apache-2.0
- Created: 2022-10-20T05:54:45.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-04T22:20:27.000Z (almost 2 years ago)
- Last Synced: 2025-06-01T17:22:49.058Z (about 1 year ago)
- Topics: component, dart, flutter, idea
- Language: Dart
- Homepage:
- Size: 1.7 MB
- Stars: 10
- Watchers: 1
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
> # Deprecated
>
> Plugin is discontinued. It is disabled in the Jetbrains Marketplace.
>
> ---
# 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](https://plugins.jetbrains.com/plugin/20292-widget-preview-for-flutter).
## 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](https://github.com/mitesh77/Best-Flutter-UI-Templates).)
# Table Of Contents
* [About](#about)
* [General](#general)
* [Demo](#demo)
* [Docs](#docs)
* [Getting started](#getting-started)
* [Prerequisites](#prerequisites)
* [Your first preview](#your-first-preview)
* [Transform file](#transform-file)
* [Plugin ui](#plugin-ui)
# Docs
## Getting started
### Prerequisites
- [Install Flutter](https://docs.flutter.dev/get-started/install) 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](https://plugins.jetbrains.com/plugin/20292-widget-preview-for-flutter) 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:
```dart
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 get previews => [
// 3) Individual declarations
Preview(
title: "Simple",
builder: (BuildContext context) {
return Example();
},
)
];
}
```
As you can see from the previous code, there are 3 key things to keep in mind when declaring your preview:
1) Widget.
2) Public class declaration that derives from `PreviewProvider` and has a no-arg constructor.
3) 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](https://pub.dev/packages/storybook_flutter) 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.
```dart
abstract class StoryProvider {
List get stories;
}
```
```dart
class ConvertToPreviews implements ToPreviewProvider {
@override
PreviewProvider toPreviewProvider(StoryProvider value) {
return PreviewProvider.createAnonymous(
previews: value.stories
.map(
(story) => Preview(
title: story.name,
builder: story.builder,
),
)
.toList(),
);
}
}
```
With that in place, you can create your previews like this:
```dart
class MealsViewStory implements StoryProvider {
@override
final List stories = [
Story(
name: 'Widget/Breakfast',
description: 'A preview about the breakfast.',
builder: (context) =>
MealsView(
mealsListData: MealsListData.tabIconsList[0],
),
),
// ...
];
}
```
> 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
1) Refresh: This button reloads the current preview.
2) 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.
3) 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.)