Skip to content

Getting Started with Flutter

Jump to bottom
Akshat Gandhi edited this page Nov 25, 2019 · 3 revisions

Getting Started with Flutter - [flutter-tutorial]

This is a free guide to help developers get started with flutter which is an open-source project, with contributions from Google and the community.

TABLE OF CONTENTS

flutter linux install guide

flutter upgrade guide

flutter release guide

flutter install step-by-step guide - Linux install (64 bit)

step 1 : Download the following installation bundles and tools to get started

  1. Get the Flutter SDK (latest stable version) - Official flutter docs
  2. Get the Android Studio - Download Android Studio

step 2 : Create a workspace directory - this folder will contain all your projects, flutter sdk and all its dependencies.

  • Create a folder named "workspace" on your Desktop
  • Extract the files downloaded in step 1
  • In your Downloads folder, To extract files, Right click on the file => Select "Extract Here"
  • Search for folders named "android-studio" & "flutter" in the above extracted folders.
  • Move "android-studio" & "flutter" folders into your "workspace" folder created on your Desktop.

Note : By this stage your should have a "workspace" folder on your desktop which contains "android-studio" & "flutter" named folders. Now proceed to step 3

step 3 : Install Android Studio in Linux

Open Terminal, run command :

$ cd Desktop/workspace/android-studio/bin
$ ./studio.sh
  • ./studio.sh above command is used to run android studio setup wizard
  • Once the setup wizard is loaded
  • Select do not import settings
  • Click Next
  • Select Custom installation
  • Select the Dark theme
  • SDK Component Setup - Ensure you have tick mark on
  • Android SDK (component required)
  • Android Virtual Device (component required)
  • Select all other options as well to save time in future (Optional)
  • Now, create "Android" folder inside your workspace directory on your Desktop
  • Move the "Sdk" folder which is inside your workspace directory to newly created "Android" folder
  • Now, in the android studio wizard , set the sdk location
  • Android SDK Location = /home/dev/Desktop/workspace/Android/Sdk
  • Note : replace dev in the above sdk path with your username
  • Click on next twice and it will download the required files
  • Please check your connection. Internet Connection is required to download the files
  • Click on Finish once the download is completed
  • Close Android studio

Note : This will create an Android folder in your workspace which will have Android SDK & also install Android Studio and AVD (Android Virtual Device)

step 4 : Update your PATH variable

  • Go to your HOME folder => Options => Show Hidden files
  • locate the .bashrc file in file explorer
  • Create a backup of the .bashrc file or .bash_profile file
  • Edit .bashrc file => Right click Open with text editor
PATH=$PATH:/home/dev/Desktop/workspace/flutter/bin
PATH=$PATH:/home/dev/Desktop/workspace/Android/Sdk
PATH=$PATH:/home/dev/Desktop/workspace/Android/Sdk/tools
PATH=$PATH:/home/dev/Desktop/workspace/Android/Sdk/platform-tools
PATH=$PATH:/home/dev/Desktop/workspace/android-studio/bin
  • Add the above lines at the bottom of the .bashrc file
  • Click "Save" and exit the file.
  • Note : "dev" in the above path is username of our machine. Please replace "dev" inside above lines with your username

Explanation of the above lines that are added to the .bashrc file

  1. flutter bin environment variable
PATH=$PATH:/home/dev/Desktop/workspace/flutter/bin

Note : replace "dev" inside the above command with your username

  1. android sdk environment variables
PATH=$PATH:/home/dev/Desktop/workspace/Android/Sdk
PATH=$PATH:/home/dev/Desktop/workspace/Android/Sdk/tools
PATH=$PATH:/home/dev/Desktop/workspace/Android/Sdk/platform-tools

Note : replace "dev" inside the above command with your username

  1. android studio environment variables
PATH=$PATH:/home/dev/Desktop/workspace/android-studio/bin

Note : replace "dev" inside the above command with your username

  • Verify your updated PATH variable
echo $PATH

step 5 : Install Android Studio Plugin

Open android studio using terminal command studio.sh

$ studio.sh
  • Select Configure => Plugins
  • Search for Flutter Plugin in the search bar and install
  • This will install both flutter and dart plugins
  • Restart Android Studio
  • New option to create a flutter application is now available in Android Studio
  • Click on "Create flutter application" option
  • Enter your app name, sdk location, project location, package name and some other required information
  • Click finish
  • Android studio will now create a starter flutter project
  • Happy Coding...

Accept android-licenses - Mandatory

flutter doctor --android-licenses

Disable Flutter Analytics - Optional

flutter config --no-analytics

step 6 : Run flutter doctor to test the environment setup

Note : Keep your linux system up-to-date (System Updates) which helps in installing common dependencies required by flutter

$ flutter doctor

 Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Linux, locale en_US.UTF-8)
 
    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    [✓] Android Studio (version 3.5)
    [!] Connected device
    ! No devices available

The above command should show all check marks to ensure that flutter installation is complete

step 7 : Common Errors/Warnings Guide while running flutter doctor command

  • Error : Unable to find git in your PATH Run command to Install git 2.x
sudo apt-get install git
  • Install dependency only if required by flutter doctor summary
sudo apt-get install lib32stdc++6

step 8 : Install Visual Studio Code (Optional)

Get Visual Studio Code Editor - Optional - Download Visual Studio Code

  • Install VS Code
  • Install VS Code Extensions
    • Flutter
    • Dart => this will automatically be installed with flutter extension
  • Go to View Menu => Select Command Palette or Press Ctrl+Shift+P
  • Type flutter in the Command Palette window
  • Select Flutter:New Project option
  • Provide a name to your project
  • Select your desired location to store all your projects
  • Flutter project will be created
  • Start coding...

Note : We can use Android Studio or Visual Studio Code Editor [ANY ONE] to develop flutter apps

step 9 : Launch your Android Emulator

Launch using Android Studio AVD Manager

  • Open Android Studio
  • Navigate to AVD Manager
  • Select a device from the list or Create a new device
  • Enable Hardware-GLES 2.0
  • Select x86 image Android API Level with Google API - latest stable version of Android OS
  • Click Next & Finish the Emulator Config Setup
  • Click on PLAY BUTTON to start the emulator

Launch using VS Code (Optional)

  • Check bottom-right corner of vs code
  • Click on "No Device" option
  • Select a emulator from the list
  • Click on the device name to start the emulator

Troubleshooting Android Emulator - Android Emulator not working ?

Error List

  • Your CPU does not support required features (VT-x or SVM)
  • Please ensure KVM is properly installed
  • Error 1 : KVM is required to run this AVD
  • Error 2 : User does not have permission to use KVM (/dev/kvm)

Error 1 : KVM is required to run this AVD

  • run command :
sudo apt-get install qemu-kvm
  • Restart your machine

Error 2 : User does not have permission to use KVM (/dev/kvm)

  • run command :
sudo adduser $USER kvm

above command adds the current user

echo $USER

above command prints current username

  • Restart your machine

flutter upgrade guide

how to check flutter version ?

Run command :

$ flutter --version

//Output
Flutter 1.7.8+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 20e59316b8 (5 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0

how to select a specific flutter version ?

Run command :

$ flutter version v1.9.1+hotfix.3

how to upgrade flutter sdk and packages ?

Run command :

$ flutter upgrade

//Output 
Upgrading Flutter from /home/dev/Desktop/workspace/flutter...
Updating d51fd86cd..20e59316b
 19 files changed, 61 insertions(+), 33 deletions(-)

Upgrading engine...
Downloading android-arm-profile/linux-x64 tools...                  1.0s
Downloading android-arm-release/linux-x64 tools...                  0.6s
Downloading android-arm64-profile/linux-x64 tools...                0.9s
Downloading android-arm64-release/linux-x64 tools...                1.4s
Downloading android-x86 tools...                                    2.4s
Downloading android-x64 tools...                                    2.1s
Downloading android-arm tools...                                    0.9s
Downloading android-arm-profile tools...                            0.8s
Downloading android-arm-release tools...                            0.5s
Downloading android-arm64 tools...                                  1.0s
Downloading android-arm64-profile tools...                          0.6s
Downloading android-arm64-release tools...                          0.5s
Downloading package sky_engine...                                   0.2s
Downloading common tools...                                         1.1s
Downloading common tools...                                         1.1s
Downloading linux-x64 tools...                                      3.3s

Flutter 1.7.8+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 20e59316b8 (5 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0

what are flutter channels ?

Flutter has following channels :

  • stable channel

    • Most Stable Build
    • Recommended channel for all production app releases

  • beta channel

    • "best" dev build of the previous month

  • dev channel

    • latest fully-tested build

  • master channel

    • Least Stable Build
    • latest cutting edge build

how to view your current channel ?

Run command :

$ flutter channel

//Output 
Flutter channels:
* stable
  beta
  dev
  master

symbol * next to the channel name indicates your current channel

how to switch between flutter channels ?

Run command - use "flutter channel [channel-name]"

flutter channel dev

Using this command we can switch to dev channel

what is flutter doctor ?

this is command that check your environment and displays report of the status of flutter installation.

$ flutter doctor

  Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Linux, locale en_US.UTF-8)
 
    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    [✓] Android Studio (version 3.5)
    [!] Connected device
    ! No devices available

    ! Doctor found issues in 1 category.

what are some common errors while upgrading flutter ?

Error : Missing "curl" tool. Unable to download Dart SDK.

sudo apt-get install curl

Note : above command downloads and installs the curl tool required to download dart sdk

flutter release guide

how to test your flutter app on a physical device ?

  • Connect your Android device to your computer with a USB cable.
  • Ensure that your have enabled USB DEBUGGING option
  • Navigate to and run command 
flutter install

how to sign the apk or app bundle created using flutter ?

To publish your app on Play Store, you need to give your app a digital signature

step 1 : Create a new keystore file ; if you have an existing keystore , skip this step

  • Run command in your terminal for linux/mac
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
  • Fill in the required info inside the terminal
        Enter keystore password: test@12345 
        Re-enter new password: test@12345
    
        What is your first and last name?
        [test]:  test
        What is the name of your organizational unit?
        [test]:  test
        What is the name of your organization?
        [test]:  test
        What is the name of your City or Locality?
        [test]:  test
        What is the name of your State or Province?
        [test]:  test
        What is the two-letter country code for this unit?
        [tt]:  tt
        Is CN=test, OU=test, O=test, L=test, ST=test, C=tt correct?
        [no]:  yes
        
//OUTPUT
 Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 10,000 days
                for: CN=test, OU=test, O=test, L=test, ST=test, C=tt
        [Storing /home/<user name>/key.jks]
  • Keep the keystore file private; do not check it into public source control.
  • Always keep a backup of the keystore file
  • Common errors while signing the app
    • Command 'keytool' not found
      • run command 
        sudo apt install openjdk-11-jre-headless
or 
sudo apt install openjdk-8-jre-headless

step 2 : Reference the keystore from the app

  • Create a file name key.properties in your android folder
  • Write the following lines inside the newly created file
        storePassword=<password from previous step>
        keyPassword=<password from previous step>
        keyAlias=key
        storeFile=<location of the key store file, such as /Users/<user name>/key.jks>
  • Keep the key.properties file private; do not check it into public source control.
  • Always keep a backup of the key.properties file

step 3 : Configure signing in gradle

Navigate to /android/app/build.gradle file.

  1. Replace the following
android {

with

   def keystoreProperties = new Properties()
   def keystorePropertiesFile = rootProject.file('key.properties')
   if (keystorePropertiesFile.exists()) {
       keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
   }

   android {
  1. Replace the following
buildTypes {
            release {
                // TODO: Add your own signing config for the release build.
                // Signing with the debug keys for now,
                // so `flutter run --release` works.
                signingConfig signingConfigs.debug
            }
        }

with the signing config info

signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile file(keystoreProperties['storeFile'])
           storePassword keystoreProperties['storePassword']
       }
   }
   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   }

Now, every release build of your app will be signed automatically

how to create APK file or Android App Bundle using flutter ?

how to build an android app bundle (aab) using flutter ?

Run command : Running flutter build defaults to a release build

flutter build appbundle

Note : release bundle for your app is created at /build/app/outputs/bundle/release/app.aab

how to build apk file using flutter ?

  • flutter build command defaults to a release build
flutter build apk 
Note : this command builds a fat apk

OR

flutter build apk --split-per-abi

Note : the above command generated two apk files

  • armeabi-v7a (32-bit) apk
  • arm64-v8a (64-bit) apk

What is a fat apk ?

Refer official docs

Useful Resources

Flutter Official Documentation - https://flutter.dev/ Flutter is an open-source UI software development kit created by Google. Flutter, Android, the Android logo, Google and the Google logo are registered trademarks of Google LLC.

Clone this wiki locally