Flutter – Architecture Application

Flutter architecture application mainly consists of:

  • Widgets
  • Gestures
  • Concept of State
  • Layers

Widgets

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.

Gestures

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.

Layers

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.

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.