Skip to content

aloisdeniel/flutter_device_preview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

9cd7405 · May 27, 2024
Mar 15, 2021
May 27, 2024
May 27, 2024
May 24, 2024
Feb 13, 2022
May 24, 2024
Sep 18, 2020
May 27, 2019
Nov 1, 2021
May 24, 2024
Nov 13, 2021
Nov 1, 2021

Repository files navigation

Device Preview for Flutter

Approximate how your app looks and performs on another device.

Device Preview for Flutter

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.

dependencies:
  device_preview: <latest version>

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.

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.