https://github.com/aloisdeniel/flutter_device_preview

Approximate how your app looks and performs on another device.
https://github.com/aloisdeniel/flutter_device_preview

device flutter preview tool

Last synced: 3 days ago
JSON representation

Approximate how your app looks and performs on another device.

• Host: GitHub
• URL: https://github.com/aloisdeniel/flutter_device_preview
• Owner: aloisdeniel
• License: mit
• Created: 2019-05-27T05:51:42.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-05T09:21:33.000Z (6 months ago)
• Last Synced: 2025-01-14T11:12:15.831Z (10 days ago)
• Topics: device, flutter, preview, tool
• Language: Dart
• Homepage: https://aloisdeniel.github.io/flutter_device_preview/
• Size: 112 MB
• Stars: 2,225
• Watchers: 21
• Forks: 346
• Open Issues: 118
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



Approximate how your app looks and performs on another device.




  

  

    

  





  



## Main features

* Preview any device from any device

* Change the device orientation

* Dynamic system configuration (*language, dark mode, text scaling factor, ...)*

* Freeform device with adjustable resolution and safe areas

* Keep the application state

* Plugin system (*Screenshot, File explorer, ...*)

* Customizable plugins

## Quickstart

### Add dependency to your pubspec file

Since Device Preview is a simple Dart package, you have to declare it as any other dependency in your `pubspec.yaml` file.

```yaml

dependencies:

  device_preview: 

```

### Add DevicePreview

Wrap your app's root widget in a `DevicePreview` and make sure to :

* Set your app's `useInheritedMediaQuery` to `true`.

* Set your app's `builder` to `DevicePreview.appBuilder`.

* Set your app's `locale` to `DevicePreview.locale(context)`.

> Make sure to override the previous properties as described. If not defined, `MediaQuery` won't be simulated for the selected device.

```dart

import 'package:device_preview/device_preview.dart';

void main() => runApp(

  DevicePreview(

    enabled: !kReleaseMode,

    builder: (context) => MyApp(), // Wrap your app

  ),

);

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      useInheritedMediaQuery: true,

      locale: DevicePreview.locale(context),

      builder: DevicePreview.appBuilder,

      theme: ThemeData.light(),

      darkTheme: ThemeData.dark(),

      home: const HomePage(),

    );

  }

}

```

## Documentation

Open the website

## Demo

Open the demo

## Limitations

Think of Device Preview as a first-order approximation of how your app looks and feels on a mobile device. With Device Mode you don't actually run your code on a mobile device. You simulate the mobile user experience from your laptop, desktop or tablet.

> There are some aspects of mobile devices that Device Preview will never be able to simulate. When in doubt, your best bet is to actually run your app on a real device.