What is widget in Flutter

Firstly, widget in flutter is a class that describes how our flutter app should look like by creating its instances.

Secondly, the central idea behind using widgets is to build our user interface using widgets. To clarify, widgets are like boxes on the mobile, tab or desktop screen. Consequently, since each box has a size, every widget has constraints that deal with width and height.

Therefore, finally, we can define a widget as a class that builds or rebuilds its description; and, our flutter app works on that principle.

For a beginner, we need to add something more with this definition.

In Flutter everything is widget. As a result, we must think widget as a central hierarchy in a Flutter framework.

Let us see a minimalist Flutter App to understand this concept first.

import 'package:flutter/material.dart';
import 'widgets/first_flutter_app.dart';

void main() {
  runApp(
    const FirstFlutterApp(),
  );
}

The above code shows us that the runApp() function takes the given Widget FirstFlutterApp() and makes it the root of the widget tree.

And this is our first custom widget that will sit on the top of the tree.

With reference to the main() function we must also add that to work it properly we need to import Material App library. However, we don’t want to dig deep now. Just to make it simple, let’s know that we need to have a material design so we can show our widget boxes. Right?

Further, we have created a sub-directory called “widgets” in our “lib” directory and keep the code of FirstFlutterApp(). Remember that also represents a class of hierarchy. Therefore we need to import that local library too.

That is why we need to import that also.

import 'widgets/first_flutter_app.dart';

Now, we can take a look at the custom widget that we’ve built.

import 'package:flutter/material.dart';

class FirstFlutterApp extends StatelessWidget {
  const FirstFlutterApp({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Center(
        child: Text(
          'Hello, Flutter!',
        ),
      ),
    );
  }
}

The FirstFlutterApp() extends Stateless widget. Widgets have state. But, don’t worry, we’ll discuss it later.

The widget tree consists of three more widgets. The MaterialApp, Center widget and its child, the Text widget.

As a consequence, the framework forces the root widget to cover the screen. It places the text “Hello, Flutter” at the Center of the screen.

Since we have used MaterialApp, we don’t have to worry about the text direction. The MaterialApp will take care of that.

Since each widget is a Dart class, we need to instantiate each widget and want them to show up at the particular location. This is done through the Element class. This is nothing but an instantiation of a Widget at a particular location in the tree.

What do we see?

A text “Hello, Flutter”.

However, it is displayed on the particular position in the widget tree. Now, this widget tree can be a complex one.

As a result, widgets can be inflated into more elements as the tree grows in size.

Before we close down, one thing to remember. A widget is an immutable description of part of a user interface.

We’ll discuss that later when we will discuss Element class in detail.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter