DEV Community

loading...
Cover image for Flutter multiple screen previews in 5mins

Flutter multiple screen previews in 5mins

Erickeyz
I am a web developer. I love coding, music and motivational speaking. I am friendly and open to learn
Updated on ・4 min read

Introduction

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

  1. A computer:

RE4G1h6

  1. Vscode installed: Alt Text
  2. A real Android device: Alt Text
  3. Functional USB cable: 5-must-have-cables-for-your-home (1)

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
Enter fullscreen mode Exit fullscreen mode
  • Install it
flutter pub get
Enter fullscreen mode Exit fullscreen mode
  • Import it: Now in your Dart code, you can use:
import 'package:device_preview/device_preview.dart';
Enter fullscreen mode Exit fullscreen mode
import 'package:flutter/foundation.dart';
Enter fullscreen mode Exit fullscreen mode

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<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();


  runApp(
    DevicePreview(
      enabled: !kReleaseMode,
      builder: (context) => MyApp(),
    ),
  );
}
Enter fullscreen mode Exit fullscreen mode
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: DevicePreview.of(context).locale,
      builder: DevicePreview.appBuilder, 

      home: HomePage(),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Connect your device to your computer and enable USB debugging

pexels-stanley-ng-4387770
Enable-USB-Debugging-Mode-on-Android-Devices-Running-KitKat-or-Above

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

imageedit_6_6046454179

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

  • You can also change the orientation as well mediumandroidrotate

rotate

  • 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
    login
    Ipad pro

  • 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

More Details

  • You can follow this video to see more about this post.

IMAGE ALT TEXT

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!.

Discussion (8)

Collapse
entony79129727 profile image
Entony

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

Collapse
yunweneric profile image
Erickeyz Author • 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

Collapse
thalhatou profile image
Thalhatou Yahya

Great one ☝️ thanks for sharing

Collapse
yunweneric profile image
Erickeyz Author

Thanks Yayah

Collapse
honorezemagho profile image
honorezemagho

Nice

Collapse
yunweneric profile image
Erickeyz Author

Thank you so much Mr Honore

Collapse
clovissocial profile image
Nkenganyi Clovis

Nice one bro. Lobe the way u too time to write & explained

Collapse
yunweneric profile image
Erickeyz Author

Thank you man I really appreciate