Introduction to flutter app development

Flutter is a UI software development kit released by Google in 2018 to develop cross platform apps. The open-sourced framework quickly becoming more popular by its ease of use and extensive feature set. Most companies are enthusiastic about flutter. It offers an extensive toolkit along with Flutter API, framework, and widgets to develop applications in rapid manner.

Getting Started

Table of contents

• What is Flutter
• Dart language
• Flutter Framework
• Why Flutter
• Flutter vs React Native
• Setup the environment
• Develop your first flutter application

What is Flutter

Flutter is a cross-platform software development framework released by Google in 2018. It is a UI kit for building impressive, natively compiled apps for web, mobile, and desktop from a single codebase.

Dart language

Dart is the official programming language used in flutter. It provides asynchronous programming with the help of future class. It ensures improved performance and responsiveness.

Dart is an object-oriented programming language. It’s “dart2native” feature allows Windows, Linux, and macOS platform to compile codes as a desktop application. The Dart program can be compiled into JavaScript or a self-contained executable file.

Dart has resemblance with Java, Swift, and Kotlin languages. The Dart SDK is shipped with a stand-alone Dart Virtual Machine (DVM) that allows users to build the code in a command-line interface (CLI) environment or in a DartPad.

You can find more information on Dart libraries:

A tour of the core libraries

Flutter-specific libraries:

Flutter documentation

For quick dart references, use the following link:

GitHub - codemaker2015/Dart-Cheatsheet: Dart cheatsheet for beginners

Flutter Framework

The Flutter framework was released in 2018. It is written in C, C++, and Dart languages. It uses Google’s Skia Graphics Engine for user interface rendering.

Flutter uses Dart virtual machine (DVM) to run the codes. The Dart VM uses just-in-time (JIT) for code compilation. It provides hot-reloading feature which reflects any changes to the code in the application without any need to restart or any loss of state. The Dart VM uses ahead-of-time (AOT) compilation for building the applications. AOT converts Dart code into a native platform-dependent machine code making your flutter app high performance on the target devices.

In Flutter almost everything is a widget, it is the unified building block of an application. A widget can be a unique button, style element, a separate pop-up screen, etc. Often widgets are composed of other smaller widgets. Compared to other frameworks, Flutter does not have separate controllers, views, or layouts

Image credits: flutter.dev

A widget tree concept is an implementation of nested widgets that represent user interface components. Flutter provides two sets of widgets, Cupertino (iOS) and Material (Android), which are responsible for the user interface (UI) for Android and iOS development.

Why Flutter

Flutter has some unique features such as hot reload, fast development, open source etc. Let’s have a look at the important features of flutter.

Image credits: doit

Hot reload — Allows us to see the applied changes instantly, without losing the current application state. It makes Flutter app development several times faster than other frameworks.

Fast development — Flutter provides a variety of ready-to-use incredibly customizable widgets. In addition, flutter also provides a large set of Material and Cupertino widgets that mimic the behavior of each design language.

Rendering Engine — Flutter uses Skia for rendering itself onto a platform. It makes a responsive design where you no longer have to adjust the UI to display it on various platforms.

Quality documentation — Flutter.dev provides neat documentation with examples which is quite useful for the developers to start their flutter journey. They also provide community supports, custom articles and opens git repositories to support you in your development journey.

Compatibility with older devices — Flutter supports Android versions starting from 5.1.1 and iOS versions 8 and higher.

Flutter UI is separated from native UI — Whenever native visual component lacks features or fails to display completely, it ensures error-free performance and a unified view on all supported platforms.

Flutter vs React Native

Flutter and react native are the two widely used cross platform frameworks to build mobile application for android and ios devices.

Have a look at the most common differences between them.

Setup the environment

Follow the below steps to install Flutter on Windows,

Step 1: Open flutter official site flutter.dev on your browser. Select Docs > Get Started > Install > Windows from the menu bar.

Step 2: Verifying the System Requirements.

Step 3: Downloading and installing git in your machine.

Step 4: Downloading and extracting flutter SDK from the official site.

Flutter SDK is a tool that helps us to create flutter projects, build it and transform them into native mobile applications. It is the core tool for building a flutter UI.

• Open the extracted flutter SDK folder.
• Go to flutter_console.bat file and double-click to open a command prompt window. Type flutter in the flutter console to get the list of all the commands that you can run in your machine.

Step 5: Adding flutter path in the environment variables

• Go to Control Panel > System and Security > System > Advanced System Settings > Environment Variables.
• Double click on the path and add the flutter bin folder path in the path list for both user and system variables.

Step 6: Verifying flutter framework global access

• Open the command prompt, type flutter and hit enter. You can see a list of commands if flutter is added to the path else you might do the setup again.

Step 7: Using flutter doctor command to verify the flutter setup

Open command prompt and type flutter doctor to verify the flutter setup

According to the flutter doctor, flutter has installed successfully in our system, but the Android studio, VS 2019 build tools and Windows SDK are missing.

We can resolve the VS2019 build tools and Windows SDK missing issue by the Visual Studio 2019 installation. Refer to the following link to resolve the Windows SDK missing issue if you are targeting for the windows build.

Unable to find suitable Visual Studio toolchain. Please run `flutter doctor` for more details

Step 8: Setting up Android tools and emulator for android devices

Download Android studio setup from the official site. It is recommended to download Android Studio 2021+ version. Else, you might have to add flutter and dart plugin to enable flutter development in Android studio.

Double click on the installer to start the installation process. Keep all values as default, refer to the screenshots if required.

You will get the following window after successful installation.

Click on the menu icon and select SDK manager. You can see the SDK location and update it if required. Click on the required SDK components such as Android SDK platform, SDK tools etc. Click on Next button to add these components in your machine. Refer to the following screenshots for the same.

Step 9: Setting up environment variables for Android Studio

• Create ANDROID_SDK_ROOT variable in Environment variables in both user and system environment variables. Provide Android SDK root folder path as the value.
• Add the Android SDK platform-tools folder path in the Environment variables path list similar to step 5.

Step 10: Setting up Android Emulator

Go through the official docs page for setting up of Android Emulator / Device. Download the Google USB Driver from the following link and install the same as per the instructions provided.

Step 11: Creating an emulator

• Go to Tools > AVD Manager. Click on Create Virtual Device.
• Select a device and its dimensions as per your preference.
• Select a system image and click on Finish.
• Click on the play ▶ button to start the emulator.

• Run the flutter doctor command to verify the setup.

Flutter doctor might give you a warning on Visual Studio installation. We have skipped the Visual Studio installation. You can install if required. We have fully configured the flutter framework to build applications.

In the next section, we will only focus on Android platform.

Develop your first flutter application

In this section, we are going to create a simple flutter application to increment and decrement a count.

You can create the flutter application in two ways:

1. Using the command line interface

Use the following command to create a flutter project:

flutter create first_flutter_project
cd first_flutter_project

Run the app using the following command:

flutter run

You might get the following error while running the flutter run command.

Resolve this error by downgrading the Gradle version in the distributionUrl which is written in gradle-wrapper.properties file located under android/gradle/wrapper folder.

#Fri Jun 23 08:50:38 CEST 2022
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip

2. Using Android Studio

Follow the steps to create a flutter application using android studio.

Step 1: Open android studio

Step 2: Create a new flutter project

• Click on New Flutter Project button to create a flutter project.

The New Flutter Project is not available in the older versions of Android studio (<2021). You have to install the flutter and dart plugin manually in your machine. Refer to the following link if you are missing the New Flutter Project button.

New Flutter Project wizard not showing on Android Studio 3.0.1

• Provide the flutter SDK path in the newly opened window and click on the Next button.

• Provide a valid project name (eg: first_flutter_app) and a project location. You can leave the remaining values as default.
• Click on the Finish button to finish the project setup.

When the project is created, you will get a fully working Flutter application with minimal functionality. After the gradle build and flutter SDK sync you will get the project structure as below,

Project Structure

Let’s understand the project structure.

.android: It holds the android project files and is used when you build flutter application for Android. When flutter code is compiled into the native code, it will get injected into this Android project.

.ios: It holds the ios project files and is used when you build the flutter application for iOS. When the flutter code is compiled into the native code, it will get injected into this iOS project.

.lib: It holds flutter library files and dart files which contain the code of our flutter application. By default, this folder contains the file main.dart, which is the entry file of the flutter application.

.test: It contains a Dart code to perform the automated test when building the app.

.packages: It is an auto-generated file which contains a list of dependencies for your flutter project.

flutter_demoapp.iml: It contains settings of the project. It named as per the project name.

pubspec.yaml: It is the project’s configuration file. It tells how your application works. This file contains:

• Project general settings such as name, description, and version of the project.
• Project dependencies.
• Project assets.
• pubspec.lock: It is an auto-generated file based on the .yaml file. It holds more details of the project dependencies.

Understand the code

Let’s understand the app code in the main.dart file which is located under the lib folder.

• We have imported a Material package. This package allows you to create a user interface in accordance with the Material design guidelines specified by Android.
• main() is an entry point of the Flutter applications. It calls the runApp function and passes it an object of MyApp. It is used to attach the given widget to the screen.
• Line 7 to 30 is a widget used for creating UI in the Flutter framework. The StatelessWidget does not maintain any state of the widget. MyApp extends StatelessWidget that overrides its build, the build method is used for creating a part of the UI of the application. In this block, the build method uses MaterialApp, a widget to create the root level UI of the application and contains three properties — title, theme, and home.
• Title: It is the title of the Flutter application.
• Theme: It is the theme of the widget.
• Home: It is the inner UI of the application.
• Line 32 to 48, the MyHomePage is similar to MyApp, except it is a StatefulWidget and the state class is named _MyHomePageState
• Line 50 to 114, the _MyHomePageState contains a method _incrementCounter() for incrementing the counter value, and a Scaffold, which is a top-level widget in comparison with the MaterialApp widget for creating the user interface. This widget contains two properties appBar and body. The appBar shows the header of the app, and body property shows the actual content of the application.
• AppBar renders the header of the application, Center widget is used to center the child widget, Text is the widget used to display the text content at the center of the screen.
• The FloatingActionButton shows a button and triggers the _incrementCounter() method.

Step 3: Run the app

Go to Run->Run main.dart or click on the Play ▶ button to run the application.

You will get an output as below,

Thanks for reading this article.

If you enjoyed this article, please click on the clap button 👏 and share to help others find it!

The full source of the demo and this tutorial is available on

GitHub - codemaker2015/first-flutter-app: first flutter app using android studio

Here are some useful links,

Flutter - Build apps for any screen

GitHub - codemaker2015/Dart-Cheatsheet: Dart cheatsheet for beginners

New Flutter Project wizard not showing on Android Studio 3.0.1