In Flutter, a widget is the fundamental building block of the user interface. Widgets are used to create the visual elements of an app, including layout, text, images, and interactivity. Everything in Flutter is a widget, from simple elements like buttons and text to complex structures like grids and lists.
Widgets can be categorized into two main types:
- Stateless Widgets:
- These widgets do not maintain any state of their own. They are immutable, meaning their properties cannot change once they are created. Stateless widgets are ideal for static content that does not require dynamic updates.
- Example:
Text,Icon,RaisedButton.
class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hello, world!'); }}
2. Stateful Widgets:
- These widgets maintain a mutable state that can change during the lifetime of the widget. They are ideal for dynamic content that needs to update in response to user interactions or other events.
- Example:
Checkbox,TextField,Slider.
class MyStatefulWidget extends StatefulWidget { @override _MyStatefulWidgetState createState() => _MyStatefulWidgetState();}class _MyStatefulWidgetState extends State<MyStatefulWidget> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Column( children: <Widget>[ Text('Counter: $_counter'), RaisedButton( onPressed: _incrementCounter, child: Text('Increment'), ), ], ); }}
Widgets in Flutter are organized in a tree structure, where each widget nests inside a parent widget. This tree structure is used to build and layout the UI in a hierarchical manner.
