{"id":13552628,"url":"https://github.com/jamesblasco/flutter_preview","last_synced_at":"2025-04-09T17:26:15.222Z","repository":{"id":56684759,"uuid":"275643239","full_name":"jamesblasco/flutter_preview","owner":"jamesblasco","description":"Flutter | Because a widget-driven development requires a widget-driven preview. ","archived":false,"fork":false,"pushed_at":"2022-12-30T20:52:21.000Z","size":3308,"stargazers_count":257,"open_issues_count":19,"forks_count":25,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-02T11:58:26.711Z","etag":null,"topics":["flutter","preview","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamesblasco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-28T18:19:10.000Z","updated_at":"2025-03-07T06:52:22.000Z","dependencies_parsed_at":"2023-01-31T16:30:40.740Z","dependency_job_id":null,"html_url":"https://github.com/jamesblasco/flutter_preview","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesblasco%2Fflutter_preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesblasco%2Fflutter_preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesblasco%2Fflutter_preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesblasco%2Fflutter_preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesblasco","download_url":"https://codeload.github.com/jamesblasco/flutter_preview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248076189,"owners_count":21043727,"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":["flutter","preview","vscode","vscode-extension"],"created_at":"2024-08-01T12:02:06.942Z","updated_at":"2025-04-09T17:26:15.203Z","avatar_url":"https://github.com/jamesblasco.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg   height=\"120px\" src=\"https://github.com/jamesblasco/flutter_preview/blob/master/screenshots/flutter_preview.jpg?raw=true\" /\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003cbr/\u003e\n          Create samples of your widgets and preview them in real time\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n  \u003cimg   width=\"640px\" src=\"https://github.com/jamesblasco/flutter_preview/blob/master/screenshots/flutter_preview_header.png?raw=true\" /\u003e\n\n\u003c/p\u003e\n\nThis project is experimental but safe to use as not code is added during compilation.\nIt won't be stable until Flutter web or desktop reaches a stable version too.\n\n\n## Getting Started\n\n### Install\n\n  - Install the vscode Flutter Preview extension. [Instructions here](https://marketplace.visualstudio.com/items?itemName=jamesblasco.flutter-preview)\n  - Add the `preview package` to your flutter project. [Instructions here](https://pub.dev/packages/preview#-installing-tab-)\n\n### Run the preview\n\n  \u003cimg align=\"right\"  height=\"200px\" src=\"https://github.com/jamesblasco/flutter_preview/blob/master/screenshots/preview_button.jpg?raw=true\" /\u003e\n\n  - Open a dart file in vscode and the preview button will appear\n  \n  - Click the button to launch Flutter Preview\n  \n  - If a devices is not active yet, it will ask you to select the device where you want to run Flutter Preview.\n    Read more about [how to choose a device](https://github.com/jamesblasco/flutter_preview/issues/7) to run Flutter Preview.\n      \n     \n     \u003cimg align=\"right\"  height=\"100px\" src=\"https://github.com/jamesblasco/flutter_preview/blob/master/screenshots/macos_helper.png?raw=true\" /\u003e\n         \n   \u003e **Using macos?** \n   \u003e 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:\n   \u003e \u003ckey\u003ecom.apple.security.network.client\u003c/key\u003e \u003ctrue/\u003e\n   \u003e to macos/Runner/DebugProfile.entitlements\n   \n\n   \n### Adding a preview\n\n  A vscode snippet is availabe for creating a preview, just type `preview` and it will appear.\n  \n  - Create a new class that extends PreviewProvider\n  \n  ```dart\n  \n  class MyPreview extends PreviewProvider {\n  \n    List\u003cPreview\u003e get previews {\n      return [\n        \n      ];\n    }\n  }\n  ```\n  \n  - Add as many Preview widgets as samples you want to display \n  ```dart\n    List\u003cPreview\u003e get previews {\n      return [\n        Preview(\n          frame: Frames.ipadPro12,\n          child: MyApp(),\n        ),\n        Preview(\n          frame: Frames.iphoneX,\n          child: MyApp(),\n        ),\n      ];\n    }\n  \n  ```\n  \n  And and the examples will appear in the preview window as soon as you save your file.\n  \n  They will appear there every time you come back to that file.\n  \n## Taking the most of Flutter Preview\n  \n###  Preview Widget\n\nThe `Preview` widget allows you to give default values that will impact your widget inside. The current availabe values are:\n- theme: Add your app theme to see your widget with your styles.\n- height, width: Set the size you want to set to the widget in case the widget has not size specified.\n- frame: See widget in different device scenarios: an android phone? or maybe an apple watch? More than 20 models and you can create your own\n  (This is done thanks to the amazing package [device_frame](https://pub.dev/packages/device_frame) built by Aloïs Deniel\n- Need more? We are working to add more in a close future: Locale, Brightness, constraints...\n\nAlso you can set a update mode for each preview from hot-reload to hot-restart;\n\n###  PreviewProvider\n\n\nYou can use multiple classes that extend `PreviewProvider` and they will be displayed in different tabs.\n\nBy default the name of the tab will be the class name but you can override the `title` param to customize it.\n\n### Custom Providers\n\nPreviewProvider 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.\nFor that you can extend any widget that extends `StatelessWidget` and make it implement the mixin `Previewer`;\n\n```dart\nclass MyCustomPreview extends StatelessWidget with Previewer {\n @override\n Widget build(BuildContext context) {\n    return Container();\n  }\n}\n```\n\nIt is important to add `with Previewer` always when extending any class, otherwise it won't be recognized by Flutter Preview.\n\nA 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.\n\n```dart\nclass Resizable extends ResizablePreviewProvider with Previewer {\n  @override\n  Preview get preview {\n    return Preview(\n      mode: UpdateMode.hotReload,\n      child: MusicCard(\n        title: 'Blond',\n        singer: 'Frank Ocean',\n        image: PreviewImage.asset('preview_assets/cover1.jpg'),\n        onTap: () =\u003e {},\n      ),\n    );\n  }\n}\n```\n\nYou can build any other previews or use any packages if you respect this two important rules\n  - All preview providers except the default one needs to have `with Previewer`\n  - They need to have an empty constructor without any params.\n  \nLet's see a cool example using the [device_preview](https://pub.dev/packages/device_preview) package  \n\u003ctable\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n```dart\nclass DevicePreviewProvider extends StatelessWidget with Previewer {\n  @override\n  String get title =\u003e 'Device Preview';\n\n  @override\n  Widget build(BuildContext context) {\n    return DevicePreview(\n      builder: (context) =\u003e MyApp(),\n    );\n  }\n}\n```\n\n\n\u003c/td\u003e\n\n\u003ctd\u003e \u003cimg align=\"right\"  height=\"300\" width=\"383\" src=\"https://github.com/jamesblasco/flutter_preview/blob/master/screenshots/custom_preview.png?raw=true\" /\u003e  \u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n\n###  Using sample assets\n\nAdding sample assets to your flutter can increase the app without no need. \n\nFor images, you can NetworkImage as before.\n\nBut if you want to use local images, don't add them to your flutter project! \n\nYou can use PreviewImage instead.\n\n```dart\n//DON'T\nAssetImage('images/example.png')\n\n//DO\nPreviewImage('debug_images/example.png')\n```\n\n\u003cpre\u003e\u003ccode\u003e# pubspec.yaml\n\nassets:\n  \u003cs\u003eimages/dart.png\u003c/s\u003e\n\n\u003c/code\u003e\u003c/pre\u003e\n\nOther assets will be supported soon\n\n##  Something is not working as expected?\n\nCreate a [new issue](https://github.com/jamesblasco/flutter_preview/issues/new) and I will take it a look\n\n\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesblasco%2Fflutter_preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesblasco%2Fflutter_preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesblasco%2Fflutter_preview/lists"}