Flutter architecture application mainly consists of:
- Concept of State
The core concept of the Flutter framework is In Flutter, Everything is a widget. Widgets are user interface components used to create the user interface of the application. In Flutter, the application is itself a widget. The application is the top-level widget and its UI is build using one or more children (widgets), which again build using its children widgets. This composability feature helps us to create a user interface of any complexity. For example, the widget hierarchy of the hello world application is as specified in the following diagram.
The Myapp is the user-created widget and it is built using the Flutter native widget, MaterialApp. MaterialApp has a home property to specify the user interface of the home page, which is again a user-created widget, MyHomePage. MyHomePage is build using another flutter native widget, Scaffold. The scaffold has two properties — body and appBar. The body is used to specify its main user interface and the appBar is used to specify its header user interface Header UI is build using flutter native widget, AppBar, and Body UI is build using Center widget. The Center widget has a property, Child, which refers to the actual content and it is built using the Text widget.
Flutter widgets support interaction through a special widget, GestureDetector. GestureDetector is an invisible widget having the ability to capture user interactions such as tapping, dragging, etc., of its child widget. Many native widgets of Flutter support interaction through the use of GestureDetector. We can also incorporate the interactive feature into the existing widget by composing it with the GestureDetector widget. We will learn the gestures separately in the upcoming chapters.
Concept of State
Flutter widgets support State maintenance by providing a special widget, StatefulWidget. The widget needs to be derived from StatefulWidget widget to support state maintenance and all other widgets should be derived from StatefulWidget. Flutter widgets are reactive in native. This is similar to ReactJS and StatefulWidget will be auto re-rendered whenever its internal state is changed. The re-rendering is optimized by finding the difference between old and new widget UI and rendering only the necessary changes.
The most important concept of the Flutter framework is that the framework is grouped into multiple categories in terms of complexity and arranged in layers of decreasing complexity. A layer is build using its immediate next-level layer. The topmost layer is widget specific to Android and iOS. The next layer has all flutter native widgets. The next layer is the Rendering layer, which is a low-level renderer component and renders everything in the flutter app. Layers go down to core platform-specific code. The general overview of a layer in Flutter is specified in the below diagram?
In Flutter, everything is a widget and a complex widget is composed of already existing widgets. Interactive features can be incorporated whenever necessary using the GestureDetector widget. The state of a widget can be maintained whenever necessary using StatefulWidget widget. Flutter offers layered design so that any layer can be programmed depending on the complexity of the task.
- Getting Started with Cross-Platform Mobile Application using Flutter
- Creating a Simple Application in Flutter
- Android System Architecture
- Android Architecture Patterns
- MVC (Model View Controller) Architecture Pattern in Android with Example
- MVP (Model View Presenter) Architecture Pattern in Android with Example
- MVVM (Model View ViewModel) Architecture Pattern in Android
- Difference Between MVC and MVP Architecture Pattern in Android
- Difference Between MVC and MVVM Architecture Pattern in Android
- Difference Between MVP and MVVM Architecture Pattern in Android
- Difference between React Native and Flutter
- Difference Between Rows and Columns vs Container in Flutter
- Multi Page Applications in Flutter
- Routes and Navigator in Flutter
- Container class in Flutter
- Difference Between Stateless and Stateful Widget in Flutter
- ProgressIndicator in Flutter
- Flutter - Stateful vs Stateless Widgets
- Listview.builder in Flutter
- How to Add images in Flutter App?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.