flutter_device_emulator 0.0.3

Preview your Flutter widgets across multiple device screens in real-time.

flutter_device_emulator

A Flutter package to emulate different device screens and layouts, making it easier to preview and test your app on various device types and resolutions directly within your Flutter app or development environment.

Features

• Emulate multiple device screen sizes and resolutions
• Switch between device types (phone, tablet, etc.)
• Preview your app in different orientations
• Easy integration with your existing Flutter project
• Customizable device frames and backgrounds

Installation

Add the following to your pubspec.yaml:

dependencies:
  flutter_device_emulator: latest_version

copied to clipboard

Then run:

flutter pub get

copied to clipboard

Usage

Import the package and wrap your app or widget with the emulator:

import 'package:flutter_device_emulator/flutter_device_emulator.dart';

DeviceEmulator(
  builder: (context) => SafeArea(child: HomePage()),
)

copied to clipboard

Example

See the example/ directory for a complete sample app demonstrating usage and available features.

API Reference

DeviceEmulator

The main widget to wrap your app for device emulation. Provides controls for device type, orientation, theme, and text direction.

Constructor:

DeviceEmulator({
  required WidgetBuilder builder,
  bool enableThemeToggle = true,
  bool enableOrientationToggle = true,
  bool enableLanguageToggle = true,
  Key? key,
})

copied to clipboard

Parameters:

• builder (required): A function that builds the widget tree to be emulated inside the device frame.
• enableThemeToggle (default: true): If true, shows a button to toggle between light and dark themes.
• enableOrientationToggle (default: true): If true, shows a button to toggle between portrait and landscape orientations.
• enableLanguageToggle (default: true): If true, shows a button to toggle between left-to-right and right-to-left text directions.
• key: Optional widget key.

Features:

• Device selector: Choose from a list of common devices to emulate.
• Theme toggle: Switch between light and dark modes.
• Orientation toggle: Switch between portrait and landscape.
• Text direction toggle: Switch between LTR and RTL layouts.
• Screenshot: Capture the current emulated screen (web only).

Example:

DeviceEmulator(
  builder: (context) => SafeArea(child: HomePage()),
)

copied to clipboard

For detailed API documentation, see the source code in lib/.

Contributing

Contributions are welcome! Please open issues or submit pull requests for bug fixes, features, or improvements.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/my-feature)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to the branch (git push origin feature/my-feature)
5. Open a pull request

License

This project is licensed under the MIT License.