Flutter Architecture

Flutter architecture application mainly

consists
• Widgets
• Gestures
• Concept of State
• Layers
 Widgets

• Widgets are the primary component of any flutter

application. It acts as a UI for the user to interact
with the application. Any flutter application is itself
a widget that is made up of a combination of
widgets. In a standard application, the root defines
the structure of the application followed by a
MaterialApp widget which basically holds its
internal components in place. This is where the
properties of the UI and the application itself is set.
 Cont..
• MaterialApp Widget is a predefined class in
a flutter. It is likely the main or core
component of flutter. we can access all the
other components and widgets provided
by Flutter SDK
 MaterialApp and Scaffold
• MaterialApp is a widget that introduces a
number of widgets Navigator, Theme that
are required to build a material design app.
Scaffold Widget is used under MaterialApp,
it gives you many basic functionalities, like
AppBar, BottomNavigationBar, Drawer,
FloatingActionButton, etc
 Difference MaterialApp and Scaffold
• MaterialApp Widget is the starting point of your app, it tells
Flutter that you are going to use Material components and
follow the material design in your app.
• MaterialApp is a widget that introduces a number of widgets
Navigator, Theme that are required to build a material design
app.
• Scaffold Widget is used under MaterialApp, it gives you
many basic functionalities, like AppBar,
BottomNavigationBar, Drawer, FloatingActionButton, etc.
• The Scaffold is designed to be the single top-level container
for a MaterialApp although it is not necessary to nest a
Scaffold.
 Example
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: YourWidget(),
),
));
}
 Cont..
• Inside Scaffold, there is usually an AppBar widget,
which as the name suggests defines the appbar of
the application. The scaffold also has a body where
all the component widgets are placed. This is where
these widget’s properties are set. All these widgets
combined form the Homepage of the application
itself. The Center widget has a property, Child,
which refers to the actual content and it is built
using the Text widget.
 Layers

Flutter is packaged with three layers:

• Embedder (lowest layer)
• Engine
• Framework (highest layer)
 Embedder layer
• An entry point is provided by a platform-specific
embedder, which coordinates with the underlying
operating system to access services such as
accessibility, rendering surfaces, and input.
• The embedder is written in a platform-specific
language, such as Java and C++ for Android,
Objective-C/Objective-C++ for iOS and macOS,
and C++ for Windows and Linux.
• Flutter code can be embedded into an existing
application as a module or as the complete
application’s content using the embedder.
 Engine layer

• The engine layer is written in C/C++, and it takes

care of the input, output, network requests, and
handles the difficult translation of rendering
whenever a frame needs to be painted.
• Flutter use skia as its rendering engine and it is
revealed to the Flutter framework through the
dart : ui which wraps the principal C++ code in
Dart classes.
 Framework layer

• The framework layer is the part where most

developers can interact with Flutter. The Flutter
framework provides a reactive and modern framework
that is written in Dart.
• Within the framework layer, it comprises of the
following:
• Rendering
• Widgets
• Material and cupertino
• It also has foundational classes and building block
services like animation, drawing, and gestures, which
are required for writing a Flutter application.
• Data layer: This layer is the one in charge of
interacting with APIs.
• Domain layer: This is the one in charge of
transforming the data that comes from the data layer.
• finally, we want to manage the state of that data and
present it on our user interface, that’s why we split
the presentation layer in two:
• Business logic layer: This layer manages the state
(usually using flutter_bloc).
• Presentation layer: Renders UI components based
on state.
 Gesture

• The gesture system in Flutter has two separate layers. The

first layer has raw pointer events that describe the location
and movement of pointers (for example, touches, mice, and
styli) across the screen. The second layer has gestures
that describe semantic actions that consist of one or more
pointer movements
 Gestures

• All physical form of interaction with a flutter

application is done through pre-defined gestures.
GestureDetectors are used for the same. It is an
invisible widget that is used to process physical
interaction with the flutter application. The
interaction includes gestures like tapping, dragging,
and swiping, etc. These features can be used to
creatively enhance the user experiences of the app
by making it perform desired actions based on
simple gestures.
 Gesture Detect
• Gesture Detector in Flutter is used to detect the user's
gestures on the application. It is a non-visual widget.
Inside the gesture detector, another widget is placed and the
gesture detector will capture all these events (gestures) and
execute the tasks accordingly.
 Concept of State
• State is information that (1) can be read
synchronously when the widget is built and (2) might
change during the lifetime of the widget. It is the
responsibility of the widget implementer to ensure that
the State is promptly notified when such state changes,
using State.
• State can be described as "whatever data you need in
order to rebuild your UI at any moment in time".
When the state of your app changes (for example, the
user flips a switch in the settings screen), you change the
state, and that triggers a redraw of the user interface.
 Concept of State

• If you have ever worked with React js, you might be

familiar with the concept of a state. The states are
nothing but data objects. Flutter also operates on
similar turf. For the management of state in a
Flutter application, StatefulWidget is used. Similar
to the concept of state in React js, the re-rendering
of widgets specific to the state occurs whenever the
state changes. This also avoids the re-rendering of
the entire application, every time the state of a
widget changes.
 Stateful and Stateless Widgets
• A widget is either stateful or stateless. If a
widget can change—when a user interacts
with it, for example—it's stateful.
• A stateless widget never changes. Icon ,
IconButton , and Text are examples of stateless
widgets.
 Examples
• Stateless widgets are text, icons, icon buttons, and
raised buttons.
• A stateful widget is dynamic: for example, it can
change its appearance in response to events
triggered by user interactions or when it receives
data. Checkbox , Radio , Slider , InkWell , Form ,
and TextField are examples of stateful widgets.
 Flutter Layouts
• The main concept of the layout mechanism is the
widget. We know that flutter assume everything as a
widget. So the image, icon, text, and even the layout
of your app are all widgets. Here, some of the things
you do not see on your app UI, such as rows,
columns, and grids that arrange, constrain, and align
the visible widgets are also the widgets.
• Flutter allows us to create a layout by composing
multiple widgets to build more complex
widgets. For example, we can see the below image
that shows three icons with a label under each one.
 Cont..

In the second image, we can see the visual layout of

the above image. This image shows a row of three
columns, and these columns contain an icon and label.
 Cont.
• In the above image, the container is a widget class
that allows us to customize the child widget. It is
mainly used to add borders, padding, margins,
background color, and many more. Here, the text
widget comes under the container for adding
margins. The entire row is also placed in a container
for adding margin and padding around the row.
Also, the rest of the UI is controlled by properties
such as color, text.style, etc.
 Layout a widget
• Let us learn how we can create and display a simple
widget. The following steps show how to layout a
widget:
• Step 1: First, you need to select a Layout widget.
• Step 2: Next, create a visible widget.
• Step 3: Then, add the visible widget to the layout
widget.
• Step 4: Finally, add the layout widget to the page
where you want to display.
 Types of Layout Widgets

• We can categories the layout widget into two

types:
1.Single Child Widget
2.Multiple Child Widget
 Single Child Widgets
• The single child layout widget is a type of widget,
which can have only one child widget inside the
parent layout widget. These widgets can also
contain special layout functionality. Flutter provides
us many single child widgets to make the app UI
attractive. If we use these widgets appropriately, it
can save our time and makes the app code more
readable. The list of different types of single child
widgets are:
 Example

• Container: It is the most popular layout widget that

provides customizable options for painting,
positioning, and sizing of widgets.
Center(
child: Container(
margin: const EdgeInsets.all(15.0),
color: Colors.blue,
width: 42.0,
height: 42.0,
),
)
 Padding

• It is a widget that is used to arrange its child widget

by the given padding.
• It
contains EdgeInsets and EdgeInsets.fromLTRB for
the desired side where you want to provide padding.
const Greetings(
child: Padding(
padding: EdgeInsets.all(14.0),
child: Text('Hello JavaTpoint!'),
),
 Cont..
• Center: This widget allows you to center the
child widget within itself.
• Align: It is a widget, which aligns its child
widget within itself and sizes it based on the
child's size. It provides more control to place
the child widget in the exact position where
you need it.
 Example

Center(
child: Container(
height: 110.0,
width: 110.0,
color: Colors.blue,
child: Align(
alignment: Alignment.topLeft,
child: FlutterLogo(
size: 50,
),
),
),
 SizedBox:
This widget allows you to give the specified size
to the child widget through all screens.

SizedBox(
width: 300.0,
height: 450.0,
child: const Card(child: Text('Hello JavaTpoint
!'),
)
 AspectRatio
• This widget allows you to keep the size of the child
widget to a specified aspect ratio.

AspectRatio(
aspectRatio: 5/3,
child: Container(
color: Colors.bluel,
),
),
 Baseline
• This widget shifts the child widget according to the
child's baseline.
child: Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Container(
height: 60,
width: 50,
color: Colors.blue,
),
 ConstrainedBox

• It is a widget that allows you to force the additional

constraints on its child widget. It means you can
force the child widget to have a specific constraint
without changing the properties of the child widget.
 Example
ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 150.0,
minWidth: 150.0,
maxHeight: 300.0,
maxWidth: 300.0,
),
child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red,
),
),
 CustomSingleChildLayout

• It is a widget, which defers from the layout of the

single child to a delegate. The delegate decides to
position the child widget and also used to determine
the size of the parent widget.
• FittedBox: It scales and positions the child widget
according to the specified fit.
 Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// It is the root widget of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Multiple Layout Widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
// This is the theme of your application.
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
 Cont..
class MyHomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("FittedBox Widget")),
body: Center(
child: FittedBox(child: Row(
children: <Widget>[
Container(
child: Image.asset('assets/computer.png'),
),
Container(
child: Text("This is a widget"),
)
],
),
fit: BoxFit.contain,
)
),
);
}
Output
 Setup
• Set up Android Studio to run Flutter
Applications. Android Studio is one of the
popular IDE developed by Google itself to
create cross-platform android applications.
First, you have to install Android
Studio of version 3.0 or later, as it offers an
integrated IDE experience for a Flutter
 Install the Flutter and Dart plugins
• After the successful installation of Android Studio, you
have to install Flutter and Dart plugins. To do so follow
the steps mentioned below:
• Start Android Studio.
• Open plugin preferences (Configure > Plugins as of
v3.6.3.0 or later).
• Select the Flutter plugin and click Install.
• Click Yes when prompted to install the Dart plugin.
• Click Restart when prompted.
• Open plugin preferences:
• For macOS: Preferences > Plugins on macOS,
 Creating the application:

• After installing Dart and Flutter plugins create a

flutter app to check if it is working properly or not,
to do so follow the steps mentioned below:
• Step 1: Open the IDE and select Start a new Flutter
project.
 Configure Flutter SDK and Dart SDK Path if
not Set
• Step 1 : Go to File Menu
Step 2 : Click on Settings ( Ctrl + Alt + S)
Step 3: then click on Flutter under Language &
Frameworks Tab
Step 4: In my PC I installed flutter in this location ( C:\
src\flutter )
[Note : please copy your PC installed location of flutter ]
Step 5 : Copy above Location and paste it to
your Flutter SDK path: location and click on Apply and
OK
Step 6 : after above settings you will see that Dart SDK
Settings under File Menu
 Step 2
• Select the Flutter Application as the project
type. Then click Next.
 Step 3
• Verify the Flutter SDK path specifies the SDK’s
location (select Install SDK… if the text field is
blank)
 Step 4
• Enter a project name (for example, myapp). Then
click Next.
Step 5: Click Finish
 Step 6
• Wait for Android Studio to install the SDK and
create the project.
• When creating a new Flutter app, some Flutter IDE
plugins ask for a company domain name in reverse
order, something like com.example. The company
domain name and project name are used together
as the package name for Android (the Bundle ID for
iOS) when the app is released. If you think that the
app might be released, it’s better to specify the
package name now. The package name can’t be
changed once the app is released, so make the
 Running the application

• Step 1: Locate the main Android Studio toolbar

 Step 2
• In the target selector, select an Android
device for running the app. If none are listed
as available, select Tools> Android > AVD
Manager and create one there. For details,
see Managing AVDs.
 Step 3
• Click the run icon in the toolbar, or invoke the
menu item Run > Run.
• After the app build completes, you’ll see the starter
app on your device.