pixel_preview 0.0.4

A powerful Flutter package for visualizing and testing UI components and screens in isolation across multiple device sizes.

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:

flutter pub add pixel_preview

copied to clipboard

Import the package in your Dart code:

import 'package:pixel_preview/pixel_preview.dart';

copied to clipboard

📱 Usage

Previewing a Component

Wrap any widget with PixelPreview and use ComponentPresets to create an interactive component preview environment:

PixelPreview(
  presets: ComponentPresets(),
  child: CardWidget(),
)

copied to clipboard

Previewing a Screen

For full screens, use ScreenPresets which provides device size presets:

PixelPreview(
  presets: ScreenPresets(
    deviceType: DeviceType.iPhone16,  // Choose from various device types
  ),
  child: LoginScreen(),
)

copied to clipboard

Disabling in Production

PixelPreview is automatically disabled in release mode, but you can explicitly control this behavior:

PixelPreview(
  presets: ComponentPresets(
    size: ComponentSizes.medium,
  ),
  enabled: kDebugMode, // Only enabled in debug mode
  child: CardWidget(),
)

copied to clipboard

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:

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
      ],
    ),
  ],
)

copied to clipboard

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 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 to share your feedback!

All contributions are warmly welcome!