How To Write A Widget In Flutter

In this tutorial, we will see How To Write A Widget In Flutter. Flutter widgets are built using a modern react-style framework, which takes inspiration from React. The central idea is that you create your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description to determine the minimal changes needed in the underlying render tree to transition from one state to the next.

Types of Widgets in Flutter

There are mainly two types of Widgets in Flutter.

1. StatelessWidget Class
2. StatefulWidget Class

StatelessWidget Class

It is a widget that does not require the mutable state. The stateless widget is a widget that describes the part of a user interface by building a constellation of other widgets that represent the user interface more concretely. The stateless widget is useful when a part of a user interface you are describing does not depend on anything other than the configuration information in an object itself and the BuildContext in which the widget is inflated.

StatefulWidget Class

It is the widget that has mutable state. The stateful widget is a widget that describes part of a user interface by building the constellation of other widgets that describe the user interface more concretely. The Stateful widgets are useful when a part of a user interface you are describing can change dynamically, e.g., due to having an internal clock-driven state, or depending on some system state. So this kind of widget is totally dependent of the State of the widget. If the state changes then it will change the UI according to it.

For compositions that depend only on configuration information in an object itself and the BuildContext in which the widget is inflated, consider using StatelessWidget.

How To Write A Widget In Flutter

If you do not know how to install Flutter on the mac, then please go to this article. Now, we have created a new project. The main file we will going to edit is lib >> main.dart file.

Replace that file with the following code.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('First app')),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Save a file and go to the terminal. Please open both the Android and iOS Simulators. Type the following command.

flutter run -d all

Now, you will see something like this.

 

It is entirely Stateless Widget.

Explanation

First, we have imported the material.dart library.

Then define a class called MyApp that extends StatelessWidget. This is a simple widget, and we are displaying just child widgets in this widget like home, appbar, and body.

The home widget is the default route of the flutter application. This is the route that is displayed first when the application is started usually unless initialRoute is specified. It’s also the route that’s displayed if the initialRoute can’t be displayed.

Then appbar widget is an app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.  You can compare this as a navbar of bootstrap.

Body is the primary content of the scaffold. The widget in the body of the scaffold is positioned at the top-left of the available space between the app bar and the bottom of the scaffold.

The runApp() function takes the given MyApp Widget and makes it the root of the widget tree. In this example, the widget tree consists of four widgets, the home widget, and its children, the appbar widget and body and body widget’s child the child widget.

So, this is how we can create a widget. Finally, How To Write A Widget In Flutter tutorial is over.