Originally posted on Medium

I hope I am not the last who don’t know about this package. Otherwise, why would I write this article? Whom for?

The package is pretty popular, has 4K likes on pub.dev, and rightfully so.

It wraps the original app and allows previewing it on different [virtual] devices.

To start with, we, as usual, should add the package to the project:

flutter pub add device_preview

Programmatically, we should also wrap the MaterialApp (GetMaterialApp in my case) in DevicePreview widget:

void main() {
  runApp(
    DevicePreview(
      enabled: true,
      builder: (context) => MyApp(), // Wrap your app
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      title: "Application",
      initialRoute: AppPages.INITIAL,
      getPages: AppPages.routes,
    );
  }
}

Note that the DevicePreview widget has an enabled property:

void main() {
  runApp(
    DevicePreview(
      enabled: false,
      builder: (context) => MyApp(), // Wrap your app
    ),
  );
}

If we set it to false, then our app looks as usual:

That allows us to switch easily, depending on the debug/production staging.

Official documentation recommends adding the following properties:
useInheritedMediaQuery, locale, and builder to MaterialApp, but according to my experiments it works without them as well:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
     // useInheritedMediaQuery: true,
     // locale: DevicePreview.locale(context),
     // builder: DevicePreview.appBuilder,
      title: "Application",
      initialRoute: AppPages.INITIAL,
      getPages: AppPages.routes,
    );
  }
}

The Tools Panel has the following tools:

1. Switch button

2. Device model. Allows to switch between different iOS/Android/Mac/Windows/Linux devices.

3. Orientation

4. Virtual keyboard preview

As we can see, DevicePreview is not just painting the frame around the app, it analyzes layout and allows easily spotting the layout problems.

5. Text scale

My two cents

I wrote this extension method (extension methods are supercool!):

extension DevicePreviewing on MyApp {
  DevicePreview withDevicePreview(bool enabled) {
     return DevicePreview(
      enabled: enabled,
      builder: (context) => this, 
    );
   }
}

Now, we can write our main.dart as usual:

void main() {
  runApp(
    MyApp()
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "Application",
      initialRoute: AppPages.INITIAL,
      getPages: AppPages.routes,
    );
  }
}

And then just effortlessly add the extension method:

Conclusion

The device_preview is a super useful package. Every Flutter developer should use it. If you can give me the smallest reason why you should not — please, leave a comment.

Thanx for reading and happy coding!