Components
Flutter is made up of two essential components.
Software development kit (SDK): Flutter provides an SDK comprising a comprehensive set of tools that facilitate application development. These tools assist in compiling code into native machine code, enabling compatibility with both iOS and Android platforms.
Widget-based UI framework: Flutter's core is a framework built on widgets. It offers a vast library of reusable UI elements, including buttons, text inputs, sliders, and more. These widgets can be easily customized and tailored to meet specific application requirements.
Widgets in flutter
In Flutter, every element is considered a widget. These widgets serve as the fundamental components that make up a Flutter application, similar to how components function in other development frameworks. Whether you're creating a button, adding text, inserting an image, or designing an entire layout, you're interacting with widgets. These widgets are arranged in a hierarchical structure, where each widget can have child widgets, and those children can also have their own children. This hierarchical design empowers developers to craft complex, flexible user interfaces by nesting and combining various widgets.Flutter’s widget-based architecture ensures that the UI is built consistently and allows developers to easily customize, reuse, and manage code efficiently.
There are primarily two types of widgets in Flutter: Stateless Widgets and Stateful Widgets. These categories influence how the app handles dynamic behavior and interaction within the UI.
1. Stateless widget
A stateless widget is a widget that remains constant after it has been rendered. Once built, it does not change during the app’s lifecycle unless explicitly rebuilt. Stateless widgets are perfect for rendering static elements that don’t require updates, such as labels, buttons, or icons.
Properties
It does not maintain or manage internal states. After rendering, the widget’s appearance and behavior stay the same. Any updates must be triggered by external factors (e.g., from parent widgets).
2. Stateful widget
A stateful widget can alter its appearance or behavior based on user input or other factors. It is typically used in situations where the UI needs to be updated dynamically in response to actions such as user input, animations, or data changes.
Properties
It stores and manages its own internal state. The UI updates automatically when the widget’s state changes, without rebuilding the entire widget. Stateful widgets are made up of two parts: the widget class itself (StatefulWidget) and the state class (State<T>), where the logic and dynamic behavior are defined.
Key differences between stateless and stateful widgets
Let's discuss the differences between both widgets.
