How many types of widgets are there in Flutter?

In Flutter, there are primarily two types of widgets based on their mutability:

  1. StatelessWidget: A StatelessWidget is an immutable widget, meaning its properties cannot change once they are set. These widgets represent UI components that do not change their appearance based on user interactions or other factors. They are mainly used for displaying static content or stateless UI elements.

Examples of StatelessWidget widgets include Text, Icon, Image, Button, etc.

Example:

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  final String text;

  MyTextWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}
  1. StatefulWidget: A StatefulWidget is a mutable widget, meaning it can change its properties over time, leading to changes in its appearance. These widgets represent UI components that can be updated or rebuilt when their internal state changes, such as user input or data updates.

Examples of StatefulWidget widgets include Checkbox, TextField, Slider, etc.

Example:

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0;

  void increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Apart from these primary classifications, Flutter also provides a wide range of specific widgets, such as Layout widgets (e.g., Row, Column, Stack, Flex), Material Design widgets (e.g., Scaffold, AppBar, FloatingActionButton), Cupertino widgets (iOS-style widgets), and many more.

Widgets in Flutter are used to build and compose the user interface. Developers can create custom widgets by combining existing ones, leading to a highly modular and reusable code structure. The combination of StatelessWidget and StatefulWidget forms the foundation of Flutter’s reactive and declarative UI development paradigm.

error: Content is protected !!