Skip to main content

Flutter Architecture

Image
By SimplexTech

Architectural Layers

1. Framework

The flutter framework is the first layer of the architecture. Developers interact through this framework layer, As you can see in the image it includes the different types of platforms, layouts, libraries and this provides a modern, reactive framework that is written in Dart Language.



Let's discuss in details all about the framework :
In flutter there are two types of libraries :


MaterialCupertino
- With the help of material library design, the UI for Android and helps developers easily build high-quality, digital experiences.


- It provides the different types of widgets with the guidelines so developers can use this easily and make their own Designs for the application. Also, use the Material design for iOs Application Design.
- With the help of Cupertino library design the UI for iOS also uses Material library for iOS design but Cupertino provides the standard iOS Widgets to create an application.

- In this You can technically run a Cupertino app on either Android or iOS, but (due to licensing issues) Cupertino won't have the correct fonts on Android. For this reason, use an iOS-specific device when writing a Cupertino app.


- With the help of Material and Cupertino libraries with this layer developer is interacting more and create responsive UI with different UI for the different OS.

- The Widget layer In Flutter, everything is a widget, which is the core concept of this framework. Widget is basically a user interface component that affects and controls the view and interface of the application. Infect the whole flutter App is Widget and it contains the child widgets. This type of structure helps you to create simple UI to Complex UI.

- Flutter provide us Rendering Tree which Render Object hierarchy helps you in painting-back widgets. It means You can manipulate these objects dynamically, with the tree automatically updating the layout to reflect your changes.

- Dart:ui library provide us animation, Painting, a gesture which helps you to create a different type of custom UI, using gesture build the gesture base Applications like Drag(), PointerEvents(), OnTap() any many more, with the use of Painting library create the painting scaled images, interpolating between shadows, painting borders around boxes and many more things in Application.

2. Engine

The FlutterEngine is the container through which Dart code can be run in an Android application. Dart code in a FlutterEngine can execute in the background, or it can be rendered to the screen by using the accompanying FlutterRenderer and Dart code using the Flutter framework on the Dart side. Rendering can be started and stopped, thus allowing a FlutterEngine to move from UI interaction to data-only processing and then back to UI interaction.


- In this service protocol give access to information about the service protocol and control the webserver. It provides you the composition which means with the use of simple objects you can create complex ones as an example, with the use of simple widgets you can create complex widgets.

- Platform channel means Flutter allows you to call platform-specific APIs whether available in kotlin or Java code on Android, or in Swift or Objective-C code on iOS. 

- Dart code is executed in Isolate. A Dart Isolate is an object that executes a specific function in a newly created thread then the second thread can communicate with the main thread continuously. The new isolate gets its own event loop and its own memory, which the original isolate. the only way that isolates can work together is by passing messages back and forth. One isolate sends a message to the other, and the receiving isolate processes that message using its event loop. 

3. Embedder

The platform embedder is the native OS application that hosts all Flutter content and acts as the glue between the host operating system and Flutter. When you start a Flutter app, the embedder provides the entry point, initializes the Flutter engine, obtains threads for UI and creates a texture that Flutter can write in that.


- Render surface setup rendering pipeline, these are the steps that Flutter takes to convert a hierarchy of widgets into the actual pixels painted onto a screen.

- Flutter provide us native plugins for Android and iOS Os with the help of the native plugin we can run the native code in different Os.

-  According to the functionality, we can categorize the package into two types:

1. Dart Package

- It is a general package, which is written in the dart language, such as a path package. This package can be used in both the platform, either it is a web or mobile.

- Some of these might contain Flutter-specific functionality and thus have a dependency on the Flutter framework.

2. Plugin Package

- Dart package that contains an API written in Dart code combined with one or more platform-specific implementations.

Plugin packages can be written for Android using Kotlin or Java code, iOS using Swift or Objective-C code, web, macOS, Windows, or Linux, or any combination of this.

Labels:

Comments

  1. StevennallJune 3, 2022 at 3:30 PM

    Thank you for taking the time to write such an informative post. Your blog is not only informative, but it is also very creative
    android app development cost

    ReplyDelete

Post a Comment

Popular posts from this blog

Flutter BottomNavigationBar

By SimplexTech
BottomNavigationBar A material widget that's displayed at the bottom of an application. Which shows around three to five items and it includes labels and icons. BottomNavigationBar allows you to select one item at a time and quickly navigate to a given page. Properties of the BottomNavigationBar : items: It defines the list of BottomNavigationBar Items to display the bottom navigation bar. currentIndex: It determines the current active bottom navigation bar item on the screen. onTap: It is called when we tapped one of the items on the screen. iconSize: It is used to specify the size of all bottom navigation item icons. fixedColor: It is used to set the color of the selected item. If we have not set a color to the icon or title, it will be shown. type: It determines the layout and behavior of a bottom navigation bar. It behaves in two different ways that are:  1. fixed: Default it is fixed and If it is null, it will use fixed. 2. shifting: It will use shifting where w
Post a Comment
Read more

MaterialApp and Scaffold in Flutter with Example

By SimplexTech
What is MaterialApp Material design is for Google Android material design which is used to create UI for Android.MaterialApp is a predefined class in a flutter that extends the Material Design class. It is likely the main or core component of flutter. We can access all the other components and widgets provided by Flutter SDK. It is a class that creates an instance of [WidgetsApp] . Text widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, and many more widgets that are accessed using MaterialApp class.  For iOS, there is the Cupertino widgets class which I'll describe or discuss or explain in another article. What is Scaffold In Flutter Scaffold is a very useful and highly flexible class. Scaffold implements the basic material design layout structure. A Scaffold Widget provides a framework that implements the flutter app's basic material design visual layout structure.  The developer can implement a wide
4 comments
Read more

Flutter TextField with Examples

By SimplexTech
Introduction to TextField TextField in Flutter is the most commonly used text input widget that allows users to collect inputs from the keyboard into an app. We can use the TextField widget in building forms, sending messages, creating search experiences, and many more. By default, Flutter decorated the TextField with an underline. We can also add several attributes with TextField, such as label, icon, inline hint text, and error text using an InputDecoration as the decoration. If we want to remove the decoration properties entirely, it is required to set the decoration to null. 1. decoration It is used to show the decoration around TextField.The most common attributes in decoration are as follows: border : It is used to create a default rounded rectangle border around TextField. labelText : It shows the label text on the selection of TextField. hintText : It shows the hint text inside TextField when there is no text entered.   TextField(               decoration: InputDecoration(    
Post a Comment
Read more