Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now
ANDROID

What is flutter and how to use it for app development?

July 6, 2020 comments off

Flutter is Google’s portable UI (user interface) framework for producing modern, native and reactive mobile(Android, iOS) application, Web and desktop from a single codebase.
Flutter is an open-source project hosted on Github. It contributed by Google and the community . Flutter uses Dart language that compiles to native ARM code and production-ready JavaScript code.

Flutter is fast, and the rendering runs at 60 fps (frames per second) and 120fps for capable devices. The higher the fps, the smoother the animations and transitions.

Flutter provides tools to create beautiful and professional-looking applications to the developer and designers. Flutter have the function of hot reload to refresh the application in milliseconds when you are editing the application for adding new features in your existing app or new ones.

Flutter is built with C, C++, Dart and Skia (2D rendering engine ). Skia works with different types of hardware and software platforms. It is also used by Google Chrome, Chrome OS, Android, Mozilla Firefox and Firefox OS. Skia is sponsored and managed by Google.

How to setup Flutter environment in Windows ?

  1. Installing Flutter SDK from official https://flutter.dev/docs/get-started/install/windows
  2. Extract file at this location C:\src in your PC
  3. Add the Flutter tool to your path at system environment
    1. copy this location C:\src\flutter\bin
    2. open system environment then click on Environment Variables.. button
    3. Click on Path and then click on Edit Button
    4. then click on new button and add C:\src\flutter\bin location and click on Ok => OK => Ok
  4. Now open Windows PowerShell or CMD and Run flutter doctor to check every thing working fine or not.
3-1. Extract Flutter SDK in C Driver under src folder
3-2. Environment Variables.
3-3. Select Path and click on Edit Button.
3-4. Click on New Button and Add Location
4. PowerShell Window to Check Flutter dependencies

After above following steps you have to install Android Studio

Install Android Studio

Step 1 : Download and install Android Studio

Step 2 : after download click on software and go through Android Studio Setup Wizard

Android Studio Offical website

Setup your Android Device

Run and Test your flutter app in your android device, you need and Android device running Android 4.1 or Higher.

  1. Open your Android device Settings
  2. go to About Phone and then click on 2-3 times on Build Number (according to different android device setting view can be changed so Click Here for detailed about USB Debugging setup)
  3. after clicking you will see a popup that you are a developer now.
  4. then go back and click on System and click on Developer options
  5. scroll and see under Debugging Tab a option named USB debugging then click on it.
  6. Now connect your Android device to PC and you will see a popup in your device , just click on Ok.
  7. run flutter doctor to see your device is connected or not.
Step 1 : About Phone Button
Step 2 : About Phone Options
Step 3 : Developer options
Step 4 : USB debugging off
Step 5: USB debugging on

Set up the Android emulator

Test you flutter app in Android Emulator, follow below steps:

  1. Open Android Studio
  2. run any Android Studio Project
  3. then click on Tools Menu → AVD Manager → Android Virtual Device Manger popup will appear
  4. Then click on Create Virtual Device…
  5. then a Virtual Device Configuration popup will appear → Select Phone Pixel 2 and click on Next → Select Android version Oreo (Android 8.1) → Click on Next Button → Type Your AVD Name → Click On Finish Button
  6. After that it will take some time to download the files to setup Android Virtual Device
  7. In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.
Android Studio Front view
AVD Manager under Tools Menu

Set up an Editor

Here i am going to setup a editor Visual Studio Code for code practices. you can also install other editors Like Sublime, IntelliJ IDEA and Emacs etc.

  1. Download and Install VS Code
  2. then install plugin flutter and dart to work with Flutter projects.
VS Code for Windows

In the above steps you will learn how to setup flutter, Android Studio and Visual Studio Code. After that you can run a flutter project easily. i will show you the hello world app in Flutter to my next blog. Thanks for reading my blog and if you want some help on above blog then comment us. we will help you to solve those issues.

References :

  1. Flutter Youtube Channel
  2. Google’s Flutter tutorial
  3. VS Code Setup and First app
  4. Flutter Beginner Course

Chandan Kumar
Follow Me:
Latest posts by Chandan Kumar (see all)