Ensemble Device Preview

A Flutter package that helps you approximate how your app looks and performs on different devices. Perfect for development and testing, allowing developers to preview their Flutter apps across various screen sizes, orientations, and device types.

Built for the Ensemble UI ecosystem, this package provides comprehensive device simulation capabilities to ensure your Flutter applications look great on all target devices.

✨ Features

• Multi-Device Simulation: Preview your app on phones, tablets, desktops, and more
• Orientation Support: Test both portrait and landscape orientations
• Theme Switching: Toggle between light and dark themes
• Accessibility Testing: Test with various accessibility settings
• Responsive Design: Ensure your UI works across different screen sizes
• Development Tools: Built-in toolbar for easy configuration
• Custom Devices: Create and save custom device configurations

🚀 Quick Start

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  ensemble_device_preview: ^1.1.1

Basic Usage

Wrap your app with DevicePreview:

import 'package:ensemble_device_preview/ensemble_device_preview.dart';

void main() {
  runApp(
    DevicePreview(
      enabled: true, // Enable device preview
      builder: (context) => MyApp(),
    ),
  );
}

Advanced Configuration

DevicePreview(
  enabled: true,
  builder: (context) => MyApp(),
  data: DevicePreviewData(
    isToolbarVisible: true,
    isEnabled: true,
    orientation: Orientation.portrait,
    deviceIdentifier: 'iPhone 14',
    locale: 'en-US',
    isFrameVisible: true,
    isDarkMode: false,
    boldText: false,
    isVirtualKeyboardVisible: false,
    disableAnimations: false,
    highContrast: false,
    accessibleNavigation: false,
    invertColors: false,
    textScaleFactor: 1.0,
  ),
)

🎯 Use Cases

• Development Testing: Preview your app on different devices during development
• Design Validation: Ensure your UI looks good across various screen sizes
• QA Testing: Test responsive behavior without needing physical devices
• Client Demos: Show your app on different devices during presentations
• Cross-Platform Development: Test how your app looks on different platforms

🔧 Configuration Options

Device Preview Settings

• Toolbar Position: Top, bottom, left, or right
• Theme: Light or dark theme for the preview interface
• Background: Customize the background appearance

Device Simulation

• Frame Visibility: Show or hide device frames
• Orientation: Portrait or landscape mode
• Custom Devices: Create and save custom device configurations

Accessibility Testing

• Text Scaling: Test with different text sizes
• High Contrast: Simulate high contrast mode
• Bold Text: Test with bold text enabled
• Color Inversion: Test with inverted colors

📱 Supported Devices

The package includes a comprehensive collection of device presets:

• iOS Devices: iPhone, iPad models
• Android Devices: Various phone and tablet sizes
• Desktop: Windows, macOS, and Linux screen sizes
• Web: Common browser viewport sizes

🎨 Customization

Custom Device Creation

final customDevice = CustomDeviceInfo(
  name: 'Custom Tablet',
  screenSize: Size(1024, 768),
  pixelDensity: 2.0,
  platform: TargetPlatform.android,
  safeAreas: EdgeInsets.all(20),
);

Theme Customization

DevicePreview(
  builder: (context) => MyApp(),
  data: DevicePreviewData(
    settings: DevicePreviewSettingsData(
      toolbarPosition: DevicePreviewToolBarPositionData.top,
      toolbarTheme: DevicePreviewToolBarThemeData.light,
      backgroundTheme: DevicePreviewBackgroundThemeData.dark,
    ),
  ),
)

🧪 Testing

Run the tests to ensure everything works correctly:

flutter test

📚 API Reference

Main Classes

• DevicePreview: Main widget for device preview functionality
• DevicePreviewData: Configuration data for device preview
• CustomDeviceInfo: Custom device configuration
• DevicePreviewSettingsData: Settings for the preview interface

Key Methods

• DevicePreview.appBuilder(): Builder function for device preview
• DevicePreviewData.fromJson(): Create from JSON data
• CustomDeviceInfo.create(): Create custom device

🌐 Platform Support

• ✅ iOS: Full support
• ✅ Android: Full support
• ✅ Web: Full support
• ✅ Windows: Full support
• ✅ macOS: Full support
• ✅ Linux: Full support

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Original device_preview package by Alois Deniel
• Flutter team for the amazing framework
• Community contributors and users

📞 Support

• Issues: GitHub Issues
• Documentation: pub.flutter-io.cn
• Community: Ensemble UI Discord

---

Built with ❤️ by the Ensemble UI team