https://github.com/samyakkkk/pixel_preview
A powerful Flutter package for visualizing and testing UI components and screens in isolation
https://github.com/samyakkkk/pixel_preview
flutter flutter-ui preview widget-testing widgets
Last synced: 8 months ago
JSON representation
A powerful Flutter package for visualizing and testing UI components and screens in isolation
- Host: GitHub
- URL: https://github.com/samyakkkk/pixel_preview
- Owner: samyakkkk
- License: bsd-3-clause
- Created: 2025-03-14T16:19:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-05T05:50:48.000Z (12 months ago)
- Last Synced: 2025-06-05T07:45:49.908Z (12 months ago)
- Topics: flutter, flutter-ui, preview, widget-testing, widgets
- Language: Dart
- Homepage:
- Size: 13.6 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Pixel Preview
A powerful Flutter package for visualizing and testing UI components and screens in isolation
Component Preview
Screen Preview
## ✨ Features
- **Interactive Preview Environment**: View your Flutter widgets in an isolated environment with resizable frames
- **Component & Screen Presets**: Use specialized `ComponentPresets` and `ScreenPresets` for different preview types
- **Device Type Presets**: Test screens on common device sizes (iPhone, Samsung, iPad, Desktop)
- **Responsive Testing**: Resize components with intuitive handles to test responsiveness
- **Component Library**: Create a comprehensive UI component library with `PixelApp`
## 📱 Cross-Device Support
Pixel Preview works seamlessly across all devices where Flutter runs. Unlike other preview tools that may have platform limitations, you can use Pixel Preview on:
- **Desktop**: Windows, macOS, and Linux
- **Mobile**: iOS and Android phones and tablets
- **Web**: Any modern browser
This 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.
## 🚀 Getting Started
Add PixelPreview to your `pubspec.yaml`:
```bash
flutter pub add pixel_preview
```
Import the package in your Dart code:
```dart
import 'package:pixel_preview/pixel_preview.dart';
```
## 📱 Usage
### Previewing a Component
Wrap any widget with `PixelPreview` and use `ComponentPresets` to create an interactive component preview environment:
```dart
PixelPreview(
presets: ComponentPresets(),
child: CardWidget(),
)
```
### Previewing a Screen
For full screens, use `ScreenPresets` which provides device size presets:
```dart
PixelPreview(
presets: ScreenPresets(
deviceType: DeviceType.iPhone16, // Choose from various device types
),
child: LoginScreen(),
)
```
### Disabling in Production
PixelPreview is automatically disabled in release mode, but you can explicitly control this behavior:
```dart
PixelPreview(
presets: ComponentPresets(
size: ComponentSizes.medium,
),
enabled: kDebugMode, // Only enabled in debug mode
child: CardWidget(),
)
```
### Creating a UI Component Library with PixelApp
`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:
```dart
PixelApp(
title: 'My UI Kit',
groups: [
// Add your components here in groups
PixelGroup(
title: 'Cards',
children: [
PixelPreview(
presets: ComponentPresets(
size: ComponentSizes.medium,
),
child: CardWidget(),
),
// other card widgets
],
),
PixelGroup(
title: 'Buttons',
children: [
PixelPreview(
presets: ComponentPresets(
size: ComponentSizes.medium,
),
child: ButtonWidget(),
),
// other button widgets
],
),
],
)
```
Check out the example app's `main.dart` file for a complete implementation of a UI component library using PixelApp.
## 🔄 Why Pixel Preview?
Feature
Pixel Preview
Other Preview Tools
Cross-platform support
✅ All platforms where Flutter runs
❌ Often limited to specific platforms
Component & Screen modes
✅ Specialized modes for both
❌ Usually focused on just one
Interactive resizing
✅ Intuitive drag handles
❌ Often fixed sizes only
Background options
✅ Light, dark, transparent
❌ Limited or no options
UI Kit view
✅ See components in a UI Kit view
❌ No UI Kit view available
## ⚠️ Limitations
PixelPreview 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.
For the most accurate results, we recommend:
- Using PixelPreview during development to catch obvious layout issues
- Testing on real devices or emulators before releasing
- Using automated testing tools for comprehensive coverage
## 📄 License
This package is available under the [LICENSE](LICENSE) included in the repository.
## 🤝 Contributing
Hi! 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!
All contributions are warmly welcome!