Flutter mobile app web application

Understand the basics of flutter in 10 minutes or less

There are 4 basic terminologies which are used in creation of the flutter application. They are as follows:-

  • Widgets
  • Gestures
  • Layout
  • State Management

Flutter – Widgets

Everything in the Flutter is a widget. The main purpose of the widget is to build the app in a nested form. We can describe it in tree form i.e. from starting to root everything is a widget. It may also tell us how the app may look according to the configuration we set for it.

If you make any changes in the code, the widget automatically reconstructs and ensures all the difference between the one and old version of the app just to determine the minimal change.

Flutter – Layouts

Flutter provides the way to create the layout of the app i.e. User Interface as by connecting more than one widget. It also ensures the layout functionality in the widget.

There are 2 types of Layout which make the app more attractive and time-saving for the user such as :

  • Single child layout
  • Multiple child layout

In the Single child layout, one child is connected to the parent widget. It provides many single child widgets to connect their parent widgets so that they may result in an attractive app. It saves time and makes the code may more readable.

In the Multiple child Layout, it contains one widget or more than one widget connected to the parent. They are unique in their way.

Flutter – Gestures

Gestures are a physical control or movement of the device by the user. Its main purpose is to interact with the user with a mobile app or any touch-based device. For E.g. To unlock the mobile lock, we slide the finger across the screen.

There are 2 types of gestures system :

  1. Pointers
  2. Gestures

Pointers-events uses to describe the location or movement of the pointers. It can not stop or cancel once you may click on it.

There are 4 types of Pointer-events:

  • PointerDownEvents
  • PointerMoveEvents
  • PointerUpEvents
  • PointerCancelEvents

Gestures are known as multiple individual pointers that mean at a time we can work on multiple events or execute them such as tap, drag, and etc.

Some popular events used such as Tap, Double Tap, Drag, Long Press, Pan, and Pinch.

Flutter – State Management

A state is information that manages the data if there may be any change or modification over the lifetime of the app. If we want to modify the state, we can use the setState() function which allows us to set the properties of the state object.

There are 2 conceptual types such as:

  1. Ephemeral State
  2. App State

Ephemeral states are also known as the local state. It is totally focused on the single widget in that particular state.

App State is also known as the Shared state. It uses globally to the state. It shares the various part of the app and between the user session.

Flutter mobile app web application

Learn more about Dart in 10 minutes or less

Dart is an open-source programming language. It was developed by Google on October 10, 2011. It is used for building mobile, desktop, and web applications.

Dart helps us to create the frontend user interface.

It can’t execute the code directly and it only compiles to native code and JavaScript. It doesn’t support an array while it supports the interface, mixins, abstract classes, reified generics, and type interface.


Same as Java, Variables uses for named storage location i.e. they are data containers used for storing values. It uses a var keyword for it.

E.g. var v_name= ‘Language’

Data Types

Data types are used for the type and size of data integrated with variables and functions. There are the following types:

  • Number: Used for displaying a number i.e. integer and double. E.g. int age = 25
  • String: Represents sequences of characters. E.g. string name=’ Dart’
  • Boolean: It represents Boolean values i.e. True or False using the bool keywords. E.g. bool var_name =True
  • List & Maps: Used to represents a collection of objects.
  • Dynamic: If the variable type is not defined then it automatically has a dynamic default type.


To perform a particular task we use a set of statements together which are known as Functions. They are arranged in a proper manner that is easy to read, maintain, and reuse.

E.g. void main(){

sub (5,7);


void sub(int a, int b){

int c;

c= a-b;




Dart language supports all operators such as Arithmetic, Equality, Comparison, Increment and Decrement, and Logical.

Decision Making and Loops

It helps us to evaluate statements before executing it. It supports if, if-else, and switch statements whereas Loops uses to execute a block of statements with specific code as it supports for, for…in, while, and do…while loops.


Comments use for providing information about the project, variables, and an operation. They may be in single line comment (//), multi-line comment (/*….*/), and Doc comment (///).

Continue and Break

Continue Statement allows us to skip the code inside the loop and jump to the next iteration whereas Break statement allows terminating the flow of the program and continue its execution.

Advantages And Disadvantages of Flutter


  • Popularity
  • High performance
  • One User Interface
  • Saves time and money
  • Has a Powerful community


  • Limited set of tools and libraries
  • Code results in larger file size
  • Weak iOS features support

More Resources


Flutter at a glance

Flutter is a free and open source User Interface toolkit for building applications for mobile, web, and desktop by using Dart.

Dart is a language with C style syntax and can be trans-compiled into JavaScript.

Dart doesn’t use web view and OEM widgets like other frameworks i.e React Native, Ionic etc. Instead, it uses it’s own rendering engine for widgets.

Since, Dart is a compiled language so the compiler parses your code and translates it into machine language.

Flutter was introduced by Google and later handled by ECMA standard.

Features of Flutter

  • Open-source framework and free for personal or commercial use.
  • It allows cross-platform development that means you can write the code once and then it can be run on different supported platforms.
  • It has a Hot Reload functionality which means that when we change the code and the change can be viewed instantly by the developer.
  • Flutter offers the concepts of widgets which help us in developing a customised design.
  • Flutter uses Dart for creating applications and Dart is easy to learn.
  • Flutter supports faster development process and delivers a highly performant application.

Architecture of Flutter

Flutter Architecture comprises of four component such as:

  1. Flutter Engine
  2. Foundation Library
  3. Widgets
  4. Design Specific Widgets

Flutter Engine

The flutter engine is written in C++ language and it is used to implement core libraries which has animation, graphics, file and network I/O plus the plugin architecture.

Foundation Library

The foundation library is written in Dart. It provides packages which are used to construct the Flutter Application.


Widgets are user interface components that include graphics, text, shapes and animation. It is similar to the react component that controls the view and interface of the application.

Design Specific Widgets

Flutter has 2 sets of widgets that conform to specific design language i.e. Material design widgets for Android and Cupertino widgets for ISO.

Flutter Vs React Native

  • Flutter is developed by Google and React Native is developed by Facebook.
  • To create mobile apps, Flutter uses Dart, and React Native uses JavaScript.
  • Flutter uses custom widgets for creating UI whereas React Native uses native UI components.
  • The architecture used by Flutter is Business Logic Component whereas React Native uses Flux and Redux.

For more details please visit:


To see the learning resources for flutter please visit: