Share
Flutter Mobile App. Development

Course Outline

Week 1
Week 2
Week 3
Week 4
Week 5

Introduction & Installation of Flutter

  • Flutter Installation
  • Running your first flutter App
Week 6
Week 7
Week 8
Week 9
Week 10
Week 11
Week 12
Week 13

SponsoredAdvertise

Android Studio Installation

Flutter SDK Installation

INSTALLATION


Before installing the flutter SDK, download android studio for the android SDK if you have not already installed android studio in week 1.

You can download android studio from this link. It is advisable to download the latest version of android studio to avoid future challenges during the flutter installations.

Visit https://developer.android.com/studio  and download android studio and install.


INSTALLATION OF FLUTTER


Visit https://flutter.dev/docs/get-started/install and select your operating system


System requirements


To install and run Flutter on windows, your development environment must meet these minimum requirements:

  • Operating Systems: Windows 7 SP1 or later (64-bit)
  • Disk Space: 400 MB (does not include disk space for IDE/tools).
  • Tools: Flutter depends on these tools being available in your environment.
  • Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
  • Git for Windows 2.x, with the Use Git from the Windows Command Prompt option

If Git for Windows is already installed, make sure you can run git commands from the command prompt or PowerShell.



Get the Flutter SDK

  1. Download the flutter installation bundle to get the latest stable release of the Flutter SDK:
  2. Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges).


Update your path

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

  • From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
  • Under User variables check if there is an entry called Path:
    • If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
    • If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.

You have to close and reopen any existing console windows for these changes to take effect.



Image


  • Click on the Environment Variables


Image


  • Under User variables check if there is an entry called Path:


Image


The flutter variable path exists in the above figure.

If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.

If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.


Image


You have to close and reopen any existing console windows for these changes to take effect.


Run flutter doctor


From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

To use the windows command, type cmd in the search



Image



  • Click on the command prompt



Image


Move to the directory where you’ve placed your flutter folder in the c drive. To exit a directory, type cd ..


Image


Image


To move to a directory, enter the command cd

 My flutter is located in c drive under sub directory mobile and so, I will move to that directory with the command below:


Image


When in the flutter directory, you can now execute the flutter doctor command to check if everything is ok


Image


This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform.


Image



Image


From the above figure, you could see I have to issues to resolve. The Android License status and connected device.


Android setup


As explained earlier, Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step discusses that. In our Flutter course, I will be using android studio. If you prefer a different editor, please visit the flutter page where you downloaded flutter for instructions on how to set up flutter on those editors.


Set up your Android device


To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher.

Enable Developer options and USB debugging on your device.


Enabling Developer Options and USB debugging on your device

 

On Android 4.1 and lower, the Developer options screen is available by default. Click on the Developer options and enable USB debugging



Image



On Android 4.2 and higher, do the following:

 

Open the Settings app.

Select System.

Scroll to the bottom and select About phone.


Image



Scroll to the bottom and tap Build number 7 times.

Return to the previous screen to find Developer options near the bottom.

Scroll down and enable USB debugging.

Using a USB cable, plug your phone into your computer.If prompted on your device, authorize your computer to access your device.

 

To verify if your phone can be used to debug, start the android studio and check if android studio recognizes your device.



Image



As you can see in the above figure, flutter recognizes my phone and gives me the option to debug my application using that device.

 

If you’ve enabled developer option and still your device is not recognized even though the computer recognizes your device and gives you an option to use it as USB, then you may need to install the software that connects your phone to the computer. The software to install depends on your phone type.

 

For my Huawei phone, I had to install Huawei HiSuite before my device was recognized for debugging.

 

INSTALLING FLUTTER & DART PLUGINS FOR ANDROID STUDIO

 

Install Flutter and Dart plugin for Android Studio. It provides the startup template to create a new Flutter application, option to run and debug Flutter application in the Android studio itself.


  • Open Android Studio
  • Click File → Settings → Plugins


Image



  • Select the Flutter plugin and click Install
  • Click Yes when prompted to install the Dart plugin.
  • Restart Android studio


In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device.

By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_HOME environment variable to that installation directory.


POSSIBLE ISSUES

 

1.      ISSUES WITH ANDROID LICENSES

 

Run: flutter doctor –android-licenses

 

There will be list of licenses you’ve not accepted yet. Enter y for yes to accept those licenses

 

2.      ANDROID SDK NOT FOUND

 

By default flutter uses the sdk path in the android studio. If for some reasons, flutter couldn’t find your android sdk, check the path of the sdk in android studio and configure flutter.

 

CHECKING PATH OF SDK IN ANDROID STUDIO

 

Click on Tools  Sdk Manager

 

CONFIGURING FLUTTER

 

Run: flutter config –android-sdkpath_of_sdk_comes_here

E.g if my sdk path is found at c:\Users\GodwinTawiah\AppData\Local\Android\Sdk

Flutter command: flutter config –android-sdk c:\Users\GodwinTawiah\AppData\Local\Android\Sdk

 

3.      NO DEVICE CONNECTED

 

If you have followed the steps to set up your android device, this won’t be a problem. You can refer to setting up your android device to see what you were missing.

 

CREATE YOUR FIRST FLUTTER APP


  • Start your android studio
  • Click File → New → New Flutter Project


Image


  • Select flutter application and click Next
  • Fill in the form that pop ups and click Next



Image



Project name: The name you are giving to your application

Flutter SDK path: The folder where you install your flutter. Type or click on the button to browse to that folder.

Project location: Where you want to save your project

Description: A brief description of the application


Image


Figure: Sample example


  • Enter your package name.


Image


A package uniquely identifies your app on the app store. So you must choose a unique name after the com. I am using our company name kuulchatmedia since it is a unique name. You can choose a unique name that you prefer and click Finish


  • Wait till the project is created


Image



Figure: FirstFlutter App yet to be run


With your phone connected and android studio recognizing your phone, you can click on the green play icon to run your flutter project on your mobile device.


Image

Figure:Flutter App being run


Image



Figure: Console after installation on phone



Image



Figure: MyFirst Flutter App



Image


Figure: MyFirst Flutter App, floating button pressed 3 times


You can see your app installed on your phone by the name of your project and flutter icon.



Image

SponsoredAdvertise