{"id":28400330,"url":"https://github.com/andrasferenczi/idea_widget_preview","last_synced_at":"2025-06-28T09:31:52.445Z","repository":{"id":62377480,"uuid":"554629814","full_name":"andrasferenczi/idea_widget_preview","owner":"andrasferenczi","description":"IDEA Plugin and Pub Package for a better UI development experience.","archived":false,"fork":false,"pushed_at":"2024-07-04T22:20:27.000Z","size":1782,"stargazers_count":10,"open_issues_count":5,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-01T17:22:49.058Z","etag":null,"topics":["component","dart","flutter","idea"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrasferenczi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-20T05:54:45.000Z","updated_at":"2024-08-05T03:38:10.000Z","dependencies_parsed_at":"2024-11-19T05:55:54.740Z","dependency_job_id":"47844c7b-a9af-4f1e-9087-67e2a5b65149","html_url":"https://github.com/andrasferenczi/idea_widget_preview","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andrasferenczi/idea_widget_preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrasferenczi%2Fidea_widget_preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrasferenczi%2Fidea_widget_preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrasferenczi%2Fidea_widget_preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrasferenczi%2Fidea_widget_preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrasferenczi","download_url":"https://codeload.github.com/andrasferenczi/idea_widget_preview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrasferenczi%2Fidea_widget_preview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262406161,"owners_count":23306091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","dart","flutter","idea"],"created_at":"2025-06-01T10:00:57.140Z","updated_at":"2025-06-28T09:31:52.440Z","avatar_url":"https://github.com/andrasferenczi.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e # Deprecated\n\u003e\n\u003e Plugin is discontinued. It is disabled in the Jetbrains Marketplace.\n\u003e\n\u003e ---\n\n# About\n\nThe 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.\n\n## General\n\nThis repository contains:\n- the open source code of the publicly available `idea_widget_preview` pub package\n- 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).\n\n## Demo\n\nHere is an example what the plugin looks like in action:\n\nhttps://user-images.githubusercontent.com/17592224/198992173-ff00ec49-47bc-478f-91f4-1667d1a78813.mov\n\n(Widgets used in the demo were retrieved from [here](https://github.com/mitesh77/Best-Flutter-UI-Templates).)\n\n# Table Of Contents\n\n\u003c!-- TOC --\u003e\n* [About](#about)\n  * [General](#general)\n  * [Demo](#demo)\n* [Docs](#docs)\n  * [Getting started](#getting-started)\n    * [Prerequisites](#prerequisites)\n    * [Your first preview](#your-first-preview)\n    * [Transform file](#transform-file)\n  * [Plugin ui](#plugin-ui)\n\u003c!-- TOC --\u003e\n\n# Docs\n\n## Getting started\n\n### Prerequisites\n\n- [Install Flutter](https://docs.flutter.dev/get-started/install) on your machine\n  - Add `flutter` tool to your path (preferred)\n- Add `idea_widget_preview` pub package to your project\n- [Install `Widget Preview for Flutter` plugin](https://plugins.jetbrains.com/plugin/20292-widget-preview-for-flutter) in your Jetbrains IDE\n\nRecommended:\n- Add `lib/widget.preview.dart` to your `.gitignore`\n\n### Your first preview\n\nThis is what a typical setup looks like for a widget:\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:idea_widget_preview/preview.dart';\n\n// 1) Your widget\nclass Example extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      width: 200,\n      height: 200,\n      color: Colors.amber,\n    );\n  }\n}\n\n// 2) The corresponding preview\nclass ExamplePreview extends PreviewProvider {\n  @override\n  List\u003cPreview\u003e get previews =\u003e [\n        // 3) Individual declarations \n        Preview(\n          title: \"Simple\",\n          builder: (BuildContext context) {\n            return Example();\n          },\n        )\n      ];\n}\n```\n\nAs you can see from the previous code, there are 3 key things to keep in mind when declaring your preview:\n\n1) Widget.\n2) Public class declaration that derives from `PreviewProvider` and has a no-arg constructor.\n3) Individual declarations you want to see in your Preview.\n\n### Transform file\n\n*(Advanced topic. It is worth reading it to know about this feature.)*\n\nIf 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.\n\nYou can provide your custom implementation that converts your existing class to `PreviewProvider`. In the following example, `StoryProvider` is your custom class.\n\n```dart\nabstract class StoryProvider {\n  List\u003cStory\u003e get stories;\n}\n```\n\n```dart\nclass ConvertToPreviews implements ToPreviewProvider\u003cStoryProvider\u003e {\n  @override\n  PreviewProvider toPreviewProvider(StoryProvider value) {\n    return PreviewProvider.createAnonymous(\n      previews: value.stories\n          .map(\n            (story) =\u003e Preview(\n                title: story.name,\n                builder: story.builder,\n            ),\n          )\n          .toList(),\n    );\n  }\n}\n```\n\nWith that in place, you can create your previews like this:\n\n```dart\nclass MealsViewStory implements StoryProvider {\n  @override\n  final List\u003cStory\u003e stories = [\n    Story(\n      name: 'Widget/Breakfast',\n      description: 'A preview about the breakfast.',\n      builder: (context) =\u003e\n              MealsView(\n                mealsListData: MealsListData.tabIconsList[0],\n              ),\n    ),\n    // ...\n  ];\n}\n```\n\n\u003e Very important:\n\u003e \n\u003e You need to configure in IDEA settings (under `Widget Preview for Flutter` \u003e `Transform file`) the path to the file where your implementation of `ToPreviewProvider` resides in.\n\n## Plugin ui\n\n![IDEA](plugin/images/idea_features.png)\n\n1) Refresh: This button reloads the current preview.\n2) 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.\n3) 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.)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrasferenczi%2Fidea_widget_preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrasferenczi%2Fidea_widget_preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrasferenczi%2Fidea_widget_preview/lists"}