Flutter – Application Device Preview

Flutter got an amazing package called device_preview. Previewing how your app looks or works on different devices is an important part of development. But is a hectic process to try to test on different emulators but still as an individual developer it will be not an easy task for you but also time-consuming. Device Preview package can help you with this. You can preview your application on any device using this library. 

We have created a sample application to show you how it looks like. 

To use the library, wrap the root widget of the application with the DevicePreview, set enabled property to true to enable device preview, and in its builder refer to the root widget of your application. And that’s it, now you can test projects on any device either it’s Mac, iOS, or android. Below shown is the code-snippet along with output images.

Implementation:

Step 1: Add the dependency

First, it is important to add the dependency in the pubspec.yaml file.

Dart

device_preview: ^1.0.0

Now, run pub get in the terminal of your IDE to configure this dependency. Or run the following command in the terminal:

Dart

flutter pub add device_preview

Step 2: Import the dependency

Import the library in the main file to use the device preview library.

Dart

import 'package:device_preview/device_preview.dart';

Step 3: Functionality

Inside the main function of the project, use DevicePreview Function and enable it to true. Inside the builder, give the root widget of the application which is MyApp() in this case.

Dart

void main() {
  runApp(DevicePreview(
    enabled: true,
    builder: (context) => const MyApp(),
  ));
}

Now, when we will run the application, we will get the feature of device preview. Then we can preview our application on available platforms.

Device Preview On Emulator:

Device Preview on Web:

Limitations:

There is one limitation too. Of course, we can preview how the app looks and work on other devices. But, it doesn’t imply we are running the code on that particular device. This means we run applications virtually.