Flutter applications primarily consist of:
- Widgets
- Gestures
- Concept of State
- Layers
Widgets
Widgets are the cornerstone of any Flutter application. They serve as the UI elements that users interact with. Every Flutter application is essentially a widget made up of a combination of other widgets. The structure begins with the root, defining the app’s layout, followed by a MaterialApp widget that contains internal components and sets the properties of the UI and the app itself.
The MaterialApp includes a Scaffold widget, which holds the visible elements (widgets) of the application. The Scaffold has two main properties: body and appBar. These properties house all the child widgets and define their attributes. For instance, within the Scaffold, the appBar widget defines the app’s top bar, while the body contains all other component widgets. These combined form the homepage of the app. The Center widget within Scaffold uses the child property to refer to the actual content, built using the Text widget.
Layers
The Flutter framework is structured into layers, categorized by decreasing complexity. These layers are built on top of one another:
- Operating System-Specific Widgets: The topmost layer, tailored to either Android or iOS.
- Native Flutter Widgets: Includes structural UI components, gesture detectors, and state management elements.
- UI and State Rendering: Contains all the visible components of the Flutter app.
- Animations and Gestures: Manages transitions, image flow, and gestures.
Each layer plays a crucial role in the design and functionality of a Flutter application.
Gestures
Gestures allow for physical interaction with the Flutter app, processed by GestureDetector. This invisible widget handles gestures like tapping, dragging, and swiping, enhancing the app’s user experience by performing actions based on these simple interactions.
Concept of State
Similar to React.js, Flutter uses the concept of state to manage data objects. In Flutter, StatefulWidget is employed for state management. When the state changes, specific widgets are re-rendered, avoiding the need to re-render the entire application.
The architecture of a Flutter app combines small and large widgets interacting in conjunction to build the application. Each layer is integral to its design and functionality, demonstrating that while building an app in Flutter is straightforward, it is supported by complex core components.
