Widget

Widget#

Widget is the basic building block of the user interface (UI). Everything you see on the screen — from a simple text label to a button, a layout structure, or even an entire screen — is a widget. A widget describes how an element should look and behave. It tells Flutter what to draw and how to respond to user interactions.

Two Main Types of Widgets

1. StatelessWidget

  • Does not change once built.

  • Used for static parts of the UI.

  • Example: a Text, Icon, or Container that doesn’t update dynamically.

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello Flutter!');
  }
}

2. StatefulWidget

  • Can change its appearance in response to user interaction or data updates.

  • Maintains a mutable state using a separate State object.

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

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

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