Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Flutter – Application Device Preview

  • Last Updated : 02 Jan, 2022

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!