Fast development with device_preview in Flutter

Tech Talk

by Engineers of Acroquest Myanmar Technology

Fast development with device_preview in Flutter

Hello everyone. I am Htet Naung Naung. I am working as a senior software engineer in Acroquest Myanmar Technology.  

In this topic, I would like to introduce device_preview, which is one of useful Flutter’s plugins. As a developer, we need to check how our app looks in different devices after development. We need to test on different devices. However, this will be a difficult and time-consuming task as an individual developer. By using device_preview plugin, we can solve this problem. 

◆ What is device_preview?

device_preview is Flutter’s plugin to approximate how our app looks and performs on different devices. device_preview can work on Android, iOS, Linux, MacOS, Web and Windows platform.  

Based on my experience, there are the following advantages of using device_preview plugin.  

  1. Verify how our app looks and performs in different emulators without having to run multiple emulators. 
  2. Reduce code development time 
  3. Deliver fast to market 

However, Device Preview is not a real device. So, Device Preview won’t be able to simulate all the features of mobile devices. The best option is to actually run your app on a real device.    

◆ What functionalities does device_preview offer?

  1. Preview any device or any device style from any device 
  2. Support the device orientation 
  3. Dynamic system configuration (language, dark mode, text scaling factor, …) 
  4. Freeform device with adjustable resolution and safe areas 
  5. Maintain the application state 
  6. Plugin system (Screenshot, File explorer, …) 
  7. Customizable plugins 

Now, we know about device preview. So, let’s get started to create a simple app. 

◆ Prerequisites

  • Need to have Flutter project. (Create Flutter app)
  • device_preview version: 1.0.0 
    • There are some errors in device_preview latest version (1.1.0). So, I will use device_perview version (1.0.0) 

■ Step1: Add dependency to pubspec.yaml file

Firstly, we need to install device_perview plugin in the project.  Add the following source code in pubspec.yaml file of the project. 

dev_dependencies: 
  device_preview: 1.0.0  

Go to Flutter project directory and run the following command. 

dart pub get   

or

flutter pub get 

■ Step2: Setup device_preview in main.dart file

Add the following source code in main.dart file. 

import 'package:device_preview/device_preview.dart';  

Enable device_preview in main function. 

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

Wrap your app’s root widget in a DevicePreview and make sure to:  

  • Set your app’s useInheritedMediaQuery to true. 
  • Set your app’s builder to DevicePreview.appBuilder. 
  • Set your app’s locale to DevicePreview.locale(context). 

Make sure to override the previous properties as described. If not defined, MediaQuery won’t be simulated for the selected device. 

class MyApp extends StatelessWidget { 
  const MyApp({Key? key}) : super(key: key); 
 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: 'Flutter Demo', 
      useInheritedMediaQuery: true, 
      locale: DevicePreview.locale(context), 
      builder: DevicePreview.appBuilder, 
      theme: ThemeData( 
        primarySwatch: Colors.blue, 
      ), 
      home: const MyHomePage(title: 'Flutter Demo Home Page'), 
    ); 
  } 
}  

We can now check how our app behaves and appears on the following different devices. 

  1. Device model: iOS 
  1. Device model: Android 
  1. Device model: macOS 
  1. Device model: Windows 
  1. Device model: Linux 
  1. Device model: Custom 

If you would like to learn more about device_preview plugin, you can check the following link. 
https://pub.dev/packages/device_preview

I hope you enjoy reading this article and apply it to the project. Stay tuned for more topics. (^^) 

★★★We are hiring the staff who are interested in latest technologies.★★★

If you are interested in our company, please see the available job descriptions in the following links.

Senior Software Developer: https://www.acromyanmar.com/senior-software-developer/
Intermediate Software Developer: https://www.acromyanmar.com/intermediate-software-developer/


Check our Facebook Page!