Device Preview

Flutter is a powerful framework that allows developers to create high-quality and performant mobile applications for multiple platforms with a single codebase. However, the multitude of devices available in the market, each with different screen sizes, aspect ratios, and pixel densities, can make it challenging to ensure that an app looks and performs consistently across all devices.

This is where a Device Preview tool comes in handy. It allows developers to see how their app will look and behave on different devices, without the need to own or physically test on each device. With Device Preview, developers can easily identify and address UI layout, responsiveness, and performance issues, resulting in a more polished and user-friendly app.

The device_preview package for Flutter provides a powerful and flexible way to preview an app’s appearance and performance on multiple devices, allowing developers to test their apps quickly and efficiently. By using this tool, developers can ensure that their app looks and performs consistently on a wide range of devices, leading to a better user experience and higher customer satisfaction.

Setup

As Device Preview is a basic Dart package, it must be declared in your pubspec.yaml file like any other dependency. You can run the command below in your project’s root folder or add it manually.

flutter pub add device_preview

Wrap your app’s root widget in a DevicePreview

import 'package:device_preview/device_preview.dart';

void main() => runApp(
  DevicePreview(
    enabled: !kReleaseMode,
    builder: (context) => MyApp(), // Wrap your app
  ),
);

• Set your app’s useInheritedMediaQuery to true.

• Set your app’s builder to DevicePreview.appBuilder.

• Set your app’s locale to DevicePreview.locale(context).

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(),
    );
  }
}

And that is it :)

Let’s just run the app.

In conclusion, Device Preview is a powerful tool for Flutter developers that enables them to test their app’s design and layout on different devices, resulting in a more polished and consistent user experience. With its flexible options and straightforward integration, developers can easily incorporate Device Preview into their workflow and streamline their app development process. There are many interesting options available in the documentation that you can explore to customize your device preview experience. Here is the source code.