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.
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 ✌️❤️
