Guide to Flutter Architecture

Basic things You Need to Know About flutter architecture.. As a beginner

In this article, I will going to discuss about Flutter architecture and what it is comprised of. Benefits of learning Flutter architecture is that it helps when structuring an application, like updating state, building widgets or screens, or making an app easy to maintain and use resources efficiently and effectively. and develop high quality apps with great performances and can provide great user experience with flutter apps.

Knowing the Flutter architecture lets us get familiar with these core concepts that build up the architecture and aid in quick compilation and the code modification process.

Layers in Flutter’s architecture

Flutter has three layers they are:

  • Embedder (lowest layer)
  • Engine
  • Framework (highest layer)

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.

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 uses 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.

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, Java, Kotlin, 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.

Flutter widgets

In Flutter, everything is a widget. A widget is simply an instruction that you place within your code and they are the basic building blocks of a Flutter application’s UI. Widgets indicate how their present configuration and status should appear in display.

https://docs.flutter.dev/development/ui/widgets

When a widget’s state changes, it rebuilds its description, which the framework compares to the previous description to see what changes in the underlying render tree to transition from one state to the next.

A widget can be in the form of a button, an image, an icon, or a layout, and placing the widgets together creates a widget tree.

Widget tree

The widget tree is a never-ending chain of parent and child widgets that creates the visual layout on a screen.

Layouts are created by nesting widgets inside each other in a parent-child hierarchy. The parent-child widget tree may appear intimidating at first, but with practice, you will be able to master it.

For instance, imagine having an app with a login UI just like the image below:

Gestures

Interaction is possible with Flutter widgets thanks to a unique widget called GestureDetector. GestureDetector is an invisible widget that can record user events with its child widgets such as tapping and dragging.

Using the GestureDetector widget, Flutter provides excellent support for all types of gestures and we can include an interactive feature into an existing widget.

Material and cupertino

  • MaterialApp: The MaterialApp class represents an application that uses material design. It implements the Material design language for iOS, Android, and Web.
  • CupertinoApp: The CupertinoApp class represents an application that uses Cupertino design. It implements the current iOS design language based on Apple’s Human Interface Guidelines.

Widget states

State is the behavior of an app at any given moment. Think of it as a widget’s information when it is first created and how it defines the properties of that widget. But this information might change during the lifetime of the widget.

To build the UI in Flutter we use two types of widgets:

  • Stateless widgets
  • Stateful widgets

Stateless widgets

Stateless widgets are static, implying that once they initialize, they do not change. Stateless widgets don’t keep any real-time information, have no state to manage, and no direct interaction with the app. Icons, IconButton, and Text are examples of stateless widgets.

Also, note that a stateless widget overrides build() and returns a widget. We use the stateless widget when the UI depends on the information within the object itself:

Here, this stateless widget’s name is OurApp. A build function is overridden and takes BuildContext as a parameter, which returns a widget. That’s why we can see that the return type of the build method is a widget.

This is the place where you can design the UI of the screen, which is stateless.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}

Here, this stateless widget’s name is MyApp. A build function is overridden and takes BuildContext as a parameter, which returns a widget. That’s why we can see that the return type of the build method is a widget.

This is the place where you can design the UI of the screen, which is stateless.

Stateful widgets

Stateful widgets are dynamic, meaning they can change based on the situation. These are capable of storing real-time data, and we can use this information to update the user interface. TextField, Slider, and Form are all examples of stateful widgets.

The createState method is overridden by a stateful widget, which returns a state. When the UI can change dynamically, we use stateful widgets.

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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container();
}
}

OurApp is the name of the widget and it now overrides the createState method rather than the build method, which returns an instance of the _MyAppState class. This class then extends from State<>, which takes MyApp as a template input.

The _MyAppState method now overrides the build function and returns a widget. This is where we can define the UI of the app, which is stateful. Because it is a stateful widget, you can call the build method any number of times, which redraws the widgets on the screen.

setState(), telling the framework to redraw the widget.

State management

Managing the state of an application is one of the most important and necessary processes because it helps developers centralize all the states of various UI controls to manage data flow throughout an application.

We can also see how the state is managed and passed around in the system and how state management controls the state of one or more UI controls, such as text fields, radio buttons, checkboxes, dropdowns, toggles, and forms.

There are two kinds of state in Flutter:

  • Ephemeral/local state
  • App state

Ephemeral state

The ephemeral state represents a single widget’s local state. It can be the current page in PageView, the current animation progress, or any other current local state of the UI.

There is no need to apply any state management strategy with this state because it is manageable and not overly complex. It is really simple and basic; however, because of this, it is not ideal for large programs and complicates state maintenance.

App state

The app state is a state that is shared by multiple sections of the application and is used during a user session. App state includes information such as a user’s login information, notifications in a social networking or eCommerce app, and user preferences.

You must choose a state management approach for handling an app’s state. While there are numerous approaches to achieving the app state, the choice is heavily influenced by the complexity and nature of the app.

One approach is using the inheritedWidget. When an app gets larger and the widget tree gets more complex, the inheritedWidget can help.

InheritedWidget is a foundation class that allows classes that extend it to efficiently propagate information down the tree. Essentially, it operates by notifying registered build contexts of any changes. Other alternative approaches include:

Flutter’s rendering process

Flutter’s rendering process is basically turning widgets into pixels. This is the job of Flutter’s multi rendering pipeline. Flutter handles the input, runs animations, builds the widget tree, lays out the render objects, paints the render objects, and compiles everything into a single image.

learning theoretical things.. help you to work in flutter environment comfortably..

learn flutter in more detail refer Flutter Documentation: https://docs.flutter.dev/

Happy Coding with Flutter ✌️❤️

--

--

--

Undergraduate & Flutter & Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

AWS Codepipeline Node.js app config files:

Upgrading to minikube v1.9.2 on Windows 10

How I think about the Imposter Syndrome from a Developer perspective

DCD Explorer. The beginning

Introduction to General Purpose GPU programming

png

Boosting team’s TDD skills with hands-on training at Nokia

Top 3 programming languages to learn for a beginner in 2018.

Making SOLID Design Choices: For Beginners

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thilina Weerasinghe

Thilina Weerasinghe

Undergraduate & Flutter & Web Developer

More from Medium

Flutter GitHub Actions — A CI/CD pipeline for Flutter apps with GitHub actions, Fastlane and…

State management in Flutter using BLoC Pattern — Part 1

BLoC pattern

SMS Autofill (OTP) in Flutter

Flutter101: [part-2] impatient guide Riverpod providers when to use what?