Flutter architecture application mainly consists of:
- Concept of State
Widgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of widgets. In a standard application, the root defines the structure of the application followed by a MaterialApp widget which basically holds its internal components in place. This is where the properties of the UI and the application itself is set. The MaterialApp has a Scaffold widget that consists of the visible components (widgets) of the application. The Scaffold has two primary properties namely the body and the appbar. It holds all the child widgets and this is where all its properties are defined. The below diagram shows the hierarchy of a flutter application:.
Inside Scaffold, there is usually an AppBar widget, which as the name suggests defines the appbar of the application. The scaffold also has a body where all the component widgets are placed. This is where these widget’s properties are set. All these widgets combined form the Homepage of the application itself. The Center widget has a property, Child, which refers to the actual content and it is built using the Text widget.
The Flutter framework is categorized based on its complexity and establishes a hierarchy based on the decreasing level of these complexities. These categories are often called Layers. These layers are built on top of one another. The topmost layer is a widget specific to the operating system of the device (ie, Android or iOS). The second layer consists of the native flutter widgets, which comprise structural UI components, gesture detectors, state management components, etc. This third layer is where all the Ui and state rendering occurs. It is the layer that includes all the visible components of the flutter application. The following layer consists of animations used in transitions, image flow, and gestures. These further go on to the very high level of system design that is not the target of this article. The below diagram gives an overview of the same:
All physical form of interaction with a flutter application is done through pre-defined gestures. GestureDetectors are used for the same. It is an invisible widget that is used to process physical interaction with the flutter application. The interaction includes gestures like tapping, dragging, and swiping, etc. These features can be used to creatively enhance the user experiences of the app by making it perform desired actions based on simple gestures.
Concept of State
If you have ever worked with React js, you might be familiar with the concept of a state. The states are nothing but data objects. Flutter also operates on similar turf. For the management of state in a Flutter application, StatefulWidget is used. Similar to the concept of state in React js, the re-rendering of widgets specific to the state occurs whenever the state changes. This also avoids the re-rendering of the entire application, every time the state of a widget changes.
The architecture of a Flutter app or the flutter framework generally consists of a combination of small and larger widgets interacting in conjuncture to build the application. All of its layers are integral to its design and functioning. As simple as building an application in flutter is, it is built with equally complex components at its core.