{"id":31781413,"url":"https://github.com/samyakkkk/pixel_preview","last_synced_at":"2025-10-10T08:54:39.866Z","repository":{"id":282438155,"uuid":"948604656","full_name":"samyakkkk/pixel_preview","owner":"samyakkkk","description":"A powerful Flutter package for visualizing and testing UI components and screens in isolation","archived":false,"fork":false,"pushed_at":"2025-06-05T05:50:48.000Z","size":14273,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T07:45:49.908Z","etag":null,"topics":["flutter","flutter-ui","preview","widget-testing","widgets"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samyakkkk.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,"zenodo":null}},"created_at":"2025-03-14T16:19:15.000Z","updated_at":"2025-03-23T16:31:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"b4a702e3-b869-48bf-8108-72f850f1105a","html_url":"https://github.com/samyakkkk/pixel_preview","commit_stats":null,"previous_names":["samyakkkk/pixel_preview"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/samyakkkk/pixel_preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samyakkkk%2Fpixel_preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samyakkkk%2Fpixel_preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samyakkkk%2Fpixel_preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samyakkkk%2Fpixel_preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samyakkkk","download_url":"https://codeload.github.com/samyakkkk/pixel_preview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samyakkkk%2Fpixel_preview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279003258,"owners_count":26083555,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","flutter-ui","preview","widget-testing","widgets"],"created_at":"2025-10-10T08:54:38.836Z","updated_at":"2025-10-10T08:54:39.860Z","avatar_url":"https://github.com/samyakkkk.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ePixel Preview\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eA powerful Flutter package for visualizing and testing UI components and screens in isolation\u003c/p\u003e\n\n\u003c!-- \u003cp align=\"center\"\u003e --\u003e\n  \u003c!-- \u003ca href=\"https://pub.dev/packages/pixel_preview\"\u003e\n    \u003cimg src=\"https://img.shields.io/pub/v/pixel_preview.svg?color=0066A6\" alt=\"Pub Version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/samyakkkk/pixel_preview/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/samyakkkk/pixel_preview?color=7DDFD3\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/samyakkkk/pixel_preview/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/samyakkkk/pixel_preview?style=flat\u0026color=F05042\" alt=\"Stars\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e --\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\u003cb\u003eComponent Preview\u003c/b\u003e\u003c/p\u003e\n  \u003cimg src=\"https://github.com/samyakkkk/pixel_preview/raw/main/media/component-preview.gif\" alt=\"Component Preview\" width=\"80%\" /\u003e\n  \u003cp\u003e\u003cb\u003eScreen Preview\u003c/b\u003e\u003c/p\u003e\n  \u003cimg src=\"https://github.com/samyakkkk/pixel_preview/raw/main/media/screen-preview.gif\" alt=\"Screen Preview\" width=\"80%\" /\u003e\n\u003c/div\u003e\n\n## ✨ Features\n\n- **Interactive Preview Environment**: View your Flutter widgets in an isolated environment with resizable frames\n- **Component \u0026 Screen Presets**: Use specialized `ComponentPresets` and `ScreenPresets` for different preview types\n- **Device Type Presets**: Test screens on common device sizes (iPhone, Samsung, iPad, Desktop)\n- **Responsive Testing**: Resize components with intuitive handles to test responsiveness\n- **Component Library**: Create a comprehensive UI component library with `PixelApp`\n\n## 📱 Cross-Device Support\n\nPixel Preview works seamlessly across all devices where Flutter runs. Unlike other preview tools that may have platform limitations, you can use Pixel Preview on:\n\n- **Desktop**: Windows, macOS, and Linux\n- **Mobile**: iOS and Android phones and tablets\n- **Web**: Any modern browser\n\nThis cross-platform capability means you can preview your UI components and screens on the same device you're developing on, regardless of what that device is. The preview environment automatically adapts to your screen size, providing a consistent experience across all platforms.\n\n## 🚀 Getting Started\n\nAdd PixelPreview to your `pubspec.yaml`:\n\n```bash\nflutter pub add pixel_preview\n```\n\nImport the package in your Dart code:\n\n```dart\nimport 'package:pixel_preview/pixel_preview.dart';\n```\n\n## 📱 Usage\n\n### Previewing a Component\n\nWrap any widget with `PixelPreview` and use `ComponentPresets` to create an interactive component preview environment:\n\n```dart\nPixelPreview(\n  presets: ComponentPresets(),\n  child: CardWidget(),\n)\n```\n\n\n### Previewing a Screen\n\nFor full screens, use `ScreenPresets` which provides device size presets:\n\n```dart\nPixelPreview(\n  presets: ScreenPresets(\n    deviceType: DeviceType.iPhone16,  // Choose from various device types\n  ),\n  child: LoginScreen(),\n)\n```\n\n### Disabling in Production\n\nPixelPreview is automatically disabled in release mode, but you can explicitly control this behavior:\n\n```dart\nPixelPreview(\n  presets: ComponentPresets(\n    size: ComponentSizes.medium,\n  ),\n  enabled: kDebugMode, // Only enabled in debug mode\n  child: CardWidget(),\n)\n```\n\n### Creating a UI Component Library with PixelApp\n\n\u003cimg src=\"https://github.com/samyakkkk/pixel_preview/raw/main/media/uikit.png\" alt=\"UI Kit\" width=\"80%\" style=\"border-radius: 6px; border: 1px solid #ddd;\" /\u003e\n\n`PixelApp` allows you to create a comprehensive UI component library by displaying all your components and screens(support soon) together in a responsive grid layout:\n\n```dart\nPixelApp(\n  title: 'My UI Kit',\n  groups: [\n    // Add your components here in groups\n    PixelGroup(\n      title: 'Cards',\n      children: [\n        PixelPreview(\n          presets: ComponentPresets(\n            size: ComponentSizes.medium,\n          ),\n          child: CardWidget(),\n        ),\n        // other card widgets\n      ],\n    ),\n    PixelGroup(\n      title: 'Buttons',\n      children: [\n        PixelPreview(\n          presets: ComponentPresets(\n            size: ComponentSizes.medium,\n          ),\n          child: ButtonWidget(),\n        ),\n        // other button widgets\n      ],\n    ),\n  ],\n)\n```\n\nCheck out the example app's `main.dart` file for a complete implementation of a UI component library using PixelApp.\n\n## 🔄 Why Pixel Preview?\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eFeature\u003c/th\u003e\n    \u003cth\u003ePixel Preview\u003c/th\u003e\n    \u003cth\u003eOther Preview Tools\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eCross-platform support\u003c/td\u003e\n    \u003ctd\u003e✅ All platforms where Flutter runs\u003c/td\u003e\n    \u003ctd\u003e❌ Often limited to specific platforms\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eComponent \u0026 Screen modes\u003c/td\u003e\n    \u003ctd\u003e✅ Specialized modes for both\u003c/td\u003e\n    \u003ctd\u003e❌ Usually focused on just one\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eInteractive resizing\u003c/td\u003e\n    \u003ctd\u003e✅ Intuitive drag handles\u003c/td\u003e\n    \u003ctd\u003e❌ Often fixed sizes only\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eBackground options\u003c/td\u003e\n    \u003ctd\u003e✅ Light, dark, transparent\u003c/td\u003e\n    \u003ctd\u003e❌ Limited or no options\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eUI Kit view\u003c/td\u003e\n    \u003ctd\u003e✅ See components in a UI Kit view\u003c/td\u003e\n    \u003ctd\u003e❌ No UI Kit view available\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## ⚠️ Limitations\n\nPixelPreview is a development tool designed to help you visualize and test your UI across different screen sizes. While it's a great way to catch responsive design issues early, it doesn't replace testing on actual devices.\n\nFor the most accurate results, we recommend:\n- Using PixelPreview during development to catch obvious layout issues\n- Testing on real devices or emulators before releasing\n- Using automated testing tools for comprehensive coverage\n\n## 📄 License\n\nThis package is available under the [LICENSE](LICENSE) included in the repository.\n\n## 🤝 Contributing\n\nHi! I'm Samyak. I'm actively developing this package and am going to add AI based UI generation features as well soon! Do give the package a like and create an [issue](https://github.com/samyakkkk/pixel_preview) to share your feedback!\n\nAll contributions are warmly welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamyakkkk%2Fpixel_preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamyakkkk%2Fpixel_preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamyakkkk%2Fpixel_preview/lists"}