Flutter multiple screen previews in 5mins

#flutter #dart #android #vscode

Introduction

Update 2022

Android Development with flutter is an interesting field of software development. Given the recent uprising of mobile devices over the years with more users and mobility, Flutter, an open-source user interface software development kit (SDK) created by Google in 2017, used to develop apps for Android , iOS , Linux , Mac , Windows , Google Fuchsia, and the web from a single code base makes life easy for the following reasons:

The cross platform capabilities of Flutter is intriguing, as you build Android , iOS , Linux , Mac , Windows , Google Fuchsia, and the web apps from a single code base.
Flutter apps are budget-friendly
Native-like performance
Development goes faster.
Hot Reload feature
Read more!

Problems encountered when building flutter Apps

The main problems encountered in Flutter App development is having are:

The library is rich in Flutter, but it is limited and much more needs to be added in it.
Dart’s low popularity
The apps created using flutter have above average size.
Most Developers use Android studio which requires high processing speed machines and makes it difficult for low processing machines and beginners.
Read more!

Purpose of this Post

This post seeks to aid developers who do not have multiple devices for testing flutter code and those who don't have high processing power on their devices to run emulators, simulators and other related development tools.

Requirements

A computer:

Vscode installed:
A real Android device:
Functional USB cable:

Procedure

1. Importing Dependencies on Flutter code:

Depend on it: Add this to your package's pubspec.yaml file: ```

dependencies:
device_preview: ^0.4.8

* Install it

flutter pub get

* Import it: Now in your Dart code, you can use:

import 'package:device_preview/device_preview.dart';

import 'package:flutter/foundation.dart';

####2. Connect your device to your computer and enable USB debugging
Include the following code in your main.dart file before running the app.

Future main() async {
WidgetsFlutterBinding.ensureInitialized();

runApp(
DevicePreview(
enabled: !kReleaseMode,
builder: (context) => MyApp(),
),
);
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
locale: DevicePreview.of(context).locale,
builder: DevicePreview.appBuilder,

  home: HomePage(),
);

}
}


####2. Connect your device to your computer and enable USB debugging
![pexels-stanley-ng-4387770](https://dev-to-uploads.s3.amazonaws.com/i/0kjmenxiq9b53ydmeys8.jpg)
 ![Enable-USB-Debugging-Mode-on-Android-Devices-Running-KitKat-or-Above](https://dev-to-uploads.s3.amazonaws.com/i/9ed2spjv7zcrqih342m9.jpg)

####3. Verify that your device is connected.
Check if your device is connected On the bottom navigation bar in vscode. If your device does not show on the bottom bar, then enable your AVD devices manually.[Read more](https://www.xda-developers.com/install-adb-windows-macos-linux/)

![imageedit_6_6046454179](https://dev-to-uploads.s3.amazonaws.com/i/4575jfiawt8ebzrycavp.png)

####3. Preview on your mobile device
* With the bottom bar, you can view your app on several devices and debug any overflows or errors. 

![Screenshot_20201006-124336](https://dev-to-uploads.s3.amazonaws.com/i/qtp61cd0y9n6o5c694r0.png)

* You can also change the orientation as well
![mediumandroidrotate](https://dev-to-uploads.s3.amazonaws.com/i/6arkz6lxmsfoxwpzla7a.png)

![rotate](https://dev-to-uploads.s3.amazonaws.com/i/sm17z9rcl4bbnf29mn44.png)



* You can remove borders of devices, select the preview on a range of devices such as small Android/IOS phones, medium Android/IOS phones, large Android/IOS phones, Ipad and tablets, Smartwatches and do much more.
![Iphone X](https://dev-to-uploads.s3.amazonaws.com/i/obz3m1b02ss9h0cpo7bf.png)
![login](https://dev-to-uploads.s3.amazonaws.com/i/alca5s03vzmhni3s22ax.png)
![Ipad pro](https://dev-to-uploads.s3.amazonaws.com/i/958gn45sohotj40hh44z.png)


* Finally, you can save a screenshots of the preview by clicking on the little camera icon on your device. This gives you a link on your vscode console to download the screenshot.

![imageedit_9_6573009691](https://dev-to-uploads.s3.amazonaws.com/i/k8skoney427ttz22aj70.png)
#More Details
* You can follow this video to see more about this post.

[![IMAGE ALT TEXT](https://dev-to-uploads.s3.amazonaws.com/i/czt24crr0qsur6vi16gq.jpeg)](https://www.youtube.com/watch?v=ObD6Jgvc71k"Preview Flutter app on multiple devices")

#Conclusion
Conclusively, Even thought android studio requires a good processor for a smoother development experience with flutter, It still remains a great tool for development(one of the best). Installing previous versions of Android studio may speedup development although the developer might not be able to use the latest features of android studio and bug fixed.
This post is be a game changer for most junior developers especially in developing countries who do not have access to high processing computers and have been discouraged to pursue their careers as Flutter developers.
To customise how you device looks like and many other options [Click here!](https://pub.dev/packages/device_preview).

Top comments (8)

Entony • Jan 4 '21

Among the disadvantages of Flutter, I can add: Relatively small proven expertise. This is due to the youth of the frame. And Large file size: A basic app built by Flutter is now 4.7MB on Android and 10.9MB iOS. That’s a bit much compared to basic Java (539KB) and Kotlin (550KB) apps. Still, other cross-platform frameworks have the same weak spot: a bare minimum app written in Xamarin takes ~ 16MB, and React Native takes 7MB. You can read a full breakdown of this framework here: cleveroad.com/blog/why-use-flutter

Yunwen Eric • Jan 9 '21 • Edited

Hello Entony
One can't argue that fact that flutter apps actually are bulky in size compared to other dev starks. Given the advancement in tech, miniaturation, performance and storage, this is a big deal too.

Thanks for your comments and attachment. I find it interesting