Skip to content
Approximate how your app looks and performs on another device.
Dart Ruby Objective-C Java Swift Shell Other
Branch: master
Clone or download
Latest commit c9174ac Dec 12, 2019

Device Preview for Flutter

Approximate how your app looks and performs on another device.

Device Preview for Flutter


  • Preview any device from any device
  • Change device orientation
  • Dynamic system configuration : language, dark mode, text scaling factor
  • Freeform device with adjustable resolution and safe areas
  • Keep the application state
  • Take screenshots


void main() => runApp(
    builder: (context) => MyApp(),
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: DevicePreview.of(context).locale, // <--- Add the locale 
      builder: DevicePreview.appBuilder, // <--- Add the builder 
      title: 'Flutter Demo',
      theme: ThemeData(
      home: MyHomePage(title: 'Flutter Demo Home Page'),


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.


Can I use device preview with Desktop embedding ?

Yes, you just have to add thoses dependencies in your pubspec.yaml :

    path: plugins/flutter_plugins/path_provider_fde

Ideas and roadmap

  • Status bar
  • Override WidgetsBinding
    • Simulate physical button
    • Simulate lifecycle events
  • Storage explorer
  • Add custom devices state
  • Desktop devices
  • TV devices
  • Complete documentation
You can’t perform that action at this time.