Do you think IIT Guwahati certified course can help you in your career?
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.
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:-
569+ registered 
