mohumohu studio

In this article, we will explain the basics of Widgets, which make up the UI in Flutter, based on the official documentation!

Table of Contents

1. What is a Widget?
2. Widget Structure
3. Building Widgets
4. Widget State
5. Summary

What is a Widget?

Flutter is often described as a framework where everything is a Widget.

A Widget is a fundamental building block of a Flutter app’s UI. Each Widget represents a part of the user interface.

Widgets form a hierarchy based on their composition. Each Widget is nested within a parent Widget and inherits context from the parent. This structure continues up to the root Widget, as shown in the following example:

     import 'package:flutter/material.dart';
     import 'package:flutter/services.dart';

     void main() => runApp(const MyApp());

     class MyApp extends StatelessWidget {
       const MyApp({super.key});

       @override
       Widget build(BuildContext context) {
         return MaterialApp( // Root widget
           home: Scaffold(
             appBar: AppBar(
               title: const Text('My Home Page'),
             ),
             body: Center(
               child: Builder(
                 builder: (context) {
                   return Column(
                     children: [
                       const Text('Hello, World!'),
                       const SizedBox(height: 20),
                       ElevatedButton(
                         onPressed: () {
                           print('Click!');
                         },
                         child: const Text('A button'),
                       ),
                     ],
                   );
                 },
               ),
             ),
           ),
         );
       }
     }

Widget Structure

As mentioned earlier, Flutter emphasizes Widgets as core building units.

Widgets are typically composed of many smaller, single-purpose Widgets, which are combined to create powerful effects.

In the previous example, Flutter renders a “Hello, World!” text with a button, aligned vertically at the center of the screen.
To achieve this layout, we used:

• Center Widget → Places its child at the center of the available space.
• Column Widget → Arranges its children vertically.

Building Widgets

To create a user interface in Flutter, you need to override the build method in a Widget.

Every Widget must have a build method, which returns another Widget.

For example, to display text with padding, you can write:

     class PaddedText extends StatelessWidget {
       const PaddedText({super.key});

        @override
       Widget build(BuildContext context) {
         return Padding(
           padding: const EdgeInsets.all(8.0),
           child: const Text('Hello, World!'),
         );
       }
      }

Flutter calls the build method:

• When the Widget is created.
• When its dependencies change (e.g., its state updates).

Since this method might be called on every frame, it should be as efficient as possible.

Widget State

Flutter provides two main types of Widgets:

1. StatelessWidget (Does not store mutable state)
2. StatefulWidget (Can store mutable state)

StatelessWidget 

A StatelessWidget is a Widget without mutable state—meaning it does not have properties that change over time.

Many built-in Widgets, such as Padding, Text, and Icon, are stateless.

When creating your own Widget, you will typically start with a StatelessWidget.

StatefulWidget

If a Widget needs to change based on user interaction or other factors, it requires a state.

For example, a Widget with a counter that increments when a button is pressed must store the counter value as state.

Since Widgets themselves are immutable, the state is stored in a separate class that extends State.

Example of a StatefulWidget:

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

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

       void _incrementCounter() {
         setState(() {
           _counter++;
         });
       }
  
       @override
       Widget build(BuildContext context) {
         return Text('$_counter');
       }
     }

How Stateful Widgets Work

• When modifying an object inside State (e.g., increasing the counter), you must call setState().
• Calling setState() tells Flutter to rebuild the UI.
• Separating Widget objects from state allows Flutter to handle UI updates efficiently.
• Parents can create new instances of child Widgets without worrying about losing the persistent state.

Summary

Today, we covered the basics of Widgets in Flutter!

Even if you don’t fully understand everything yet, that’s okay—just getting a rough idea is a great start!

In the next article, we’ll start working on layouts and explore them in more detail!

🚀 Happy Flutter Development! 🚀