Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Flutter Engine
3.
Foundation Library
4.
Widgets
5.
Design Specific Widgets
6.
Gestures
7.
State Management
8.
Layers
9.
Frequently Asked Questions
9.1.
What is Flutter?
9.2.
What are widgets in Flutter?
9.3.
What are the two main types of widgets in Flutter?
10.
Conclusion
Last Updated: Mar 27, 2024
Easy

Flutter App Architecture

Author Rajat Agrawal
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Flutter is a cross-platform UI toolkit that allows applications to interact directly with underlying platform services while allowing code reuse across operating systems like iOS and Android. The goal is to make it easy for developers to create high-performance programs that feel natural across platforms while embracing differences where they exist and sharing as much code as possible.

The Flutter architecture mainly comprises four components:-

1.) Flutter Engine

2.) Foundation Library

3.) Widgets

4.) Design Specific Widgets

Let’s learn about flutter architecture in-depth.

Flutter Engine

Flutter Engine is a portable runtime for high-quality mobile apps built around the C++ programming language. It includes animation and graphics, file and network I/O, plugin architecture, accessibility support, and a dart runtime for writing, constructing, and running Flutter apps. Low-level graphics are rendered using Google's open-source graphics package, Skia.

Flutter’s engine takes core technologies:-

1.) Skia - It is a 2D graphics rendering library.

2.) Dart - It is a VM for a garbage-collected object-oriented language.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Foundation Library

The Foundation Library includes all of the necessary packages for creating the fundamental components of a Flutter application. The Dart programming language is used to create these libraries.

Widgets

Everything in Flutter is a widget, the framework's primary concept. In Flutter, a widget is a user interface component that impacts and controls the app's view and interface. It is an immutable description of a user interface component that contains widget-created visuals, text, shapes, and animations. The widgets are comparable to React components in appearance. The application is a widget in Flutter that contains several sub widgets. It signifies that the app is the top-level widget, and its UI is created using one or more child widgets, which may have sub-child widgets. This composability feature allows us to build any type of user interface.

The flutter widgets are divided into 14 categories in general. They're mainly divided into categories based on the functionality they give in a flutter app:

1.) Accessibility: These are the widgets that make a flutter app more user-friendly.

2.) Animation and Motion: These widgets make other widgets more animated.

3.) Assets, Images, and Icons: These widgets manage assets such as displaying photos and showing icons.

4.) Async: These provide async functionality in the flutter application.

5.) Basics: This is the collection of widgets required to create any flutter application.

6.) Cupertino: These are the ios designed widgets.

7.) Input: Input functionality is provided by this group of widgets in a flutter application.

8.) Interaction Models: These widgets handle touch events and direct users to various views inside the app.

9.) Layout: This collection of widgets assists in placing additional widgets on the screen as needed.

10.) Material Components: This is a collection of widgets based on Google's Material Design.

11.) Painting and effects: This is a collection of widgets that change the appearance of their children without changing their layout or shape.

12.) Scrolling: This gives a collection of other widgets that aren't scrollable by default the ability to scroll.

13.) Styling: This deals with the app's theme, responsiveness, and sizing.

14.) Text: This displays text.

Design Specific Widgets

The Flutter framework includes two sets of widgets that adhere to different design styles. Material Design for Android applications and Cupertino Style for iOS applications are the two options.

Gestures

Flutter widgets support interaction through a particular widget, GestureDetector. GestureDetector, a unique widget in Flutter, allows for interactivity. GestureDetector is an invisible widget that may record user events with its child widget, such as tapping, dragging, and so on. Several native Flutter widgets use GestureDetector to provide interaction. We can also compose the existing widget with the GestureDetector widget to add interactive features.

Some of the commonly used gestures are listed below:-

1.) Tap: It means touching the screen's surface with the fingertip for a short period of time and then releasing it.

2.) Double Tap: It is similar to the Tap, but we need to double-tap the screen in a short period of time.

3.) Drag: It allows us to use our fingertips to contact the screen's surface and move it from one point to another before releasing them.

4.) Long Press: It means continually tapping the screen's surface at a specific location.

State Management

Flutter widgets have a specific widget called StatefulWidget that helps with state management. To support state maintenance, a widget must be derived from StatefulWidget, and all other widgets should be derived from StatefulWidget. Natively, Flutter widgets are reactive. StatefulWidget will be auto-rendered if its internal state is altered, similar to reactjs. The re-rendering is optimized by identifying the differences between the old and new widget UI and only rendering the required modifications.

Layers

Layers are a key notion in the Flutter architecture, and they're organized in a top-down fashion into different categories based on their complexity. The application's UI, which is unique to the Android and iOS platforms, is the topmost layer. All of the Flutter native widgets are found in the second-highest layer. The next tier is the rendering layer, which renders everything in the Flutter app. Gestures, foundation library, engine, and core platform-specific code are the next steps below. 

The stages in Flutter app development are depicted in the diagram below:

Frequently Asked Questions

What is Flutter?

Flutter is a cross-platform UI toolkit that allows applications to interact directly with underlying platform services while allowing code reuse across operating systems like iOS and Android.

What are widgets in Flutter?

In Flutter, a widget is a user interface component that impacts and controls the app's view and interface. It is an immutable description of a user interface component that contains widget-created visuals, text, shapes, and animations.

What are the two main types of widgets in Flutter?

Widgets in flutter are divided into two main categories:-

1.) Stateless Widget

2.) Stateful Widget

Conclusion

In this article, we have extensively discussed the architecture of the Flutter framework, and we briefly discussed the Widgets, Gestures, Flutter Engine, etc. If you want to learn more, check out our articles on Method ChainingFunction CompositionObject PrototypeCRUD API FlaskJSON Response Flask API, and App Routing in Flask.

Also Read about: Clean Architecture

Do upvote our blog to help other ninjas grow.

Happy Coding!

Previous article
Flutter Hello World App in Android Studio
Next article
Difference between Flutter and React Native
Live masterclass