What is widgets in Flutter?

In Flutter, widgets are the building blocks for constructing user interfaces. They can be thought of as reusable components that are used to create the UI elements of a Flutter app. Widgets can be simple, like a button or text field, or complex, like a list view or custom drawn shape.

Main categories of widgets in Flutter

  1. Stateless widgets: These are widgets that do not have any mutable state. Once created, their properties cannot be changed. Examples of stateless widgets include Text, Icon, and Image.

  2. Stateful widgets: These are widgets that have mutable state. They can change their properties or behavior based on user interaction or other events. Examples of stateful widgets include Checkbox, Radio, and DropdownButton.

Examples of widgets in Flutter

Text: A widget that displays a string of text on the screen.

Text('Hello, world!');ā€‹

IconButton: A widget that displays an icon on the screen and responds to user clicks.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    // Do something when the button is clicked
  },
);ā€‹

TextFormField: A widget that displays a text input field on the screen.

TextFormField(
  decoration: InputDecoration(
    hintText: 'Enter your email address',
    labelText: 'Email',
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your email address';
    }
    return null;
  },
  onSaved: (value) {
    // Do something with the entered email address
  },
);
ā€‹

These are just a few examples of the many widgets available in Flutter. By combining these and other widgets, developers can create complex and beautiful user interfaces for their Flutter apps.