Flutter – Stateless Widget

Stateless Widget is something that does not have a state. To understand a Stateless Widget you need to have a clear understanding of widgets and states. A state can be defined as “an imperative changing of the user interface” and, a widget is “an immutable description of the part of user interface”. To learn more about them refer to the articles below.

• What is widgets in Flutter?
• Flutter – State Management

On the basis of states, widgets are divided into 2 categories:

1. Stateless Widget
2. Stateful Widget

In this article, we will understand what Stateless Widgets are.

What are Stateless Widgets?

A Stateless Widget is one that does not have any mutable state that it needs to track. The only area of focus of a stateless widget is the information displayed and the user interface. They deal with situations that are independent of the user’s input. A Stateless Widget does not tell the framework when to remove it or rebuild it, it gets a command from the framework itself. They create user interfaces that do not change dynamically upon updation in the nearby values. We use a stateless widget when we create an application that does not require redrawing a widget again and again. Given below is the basic structure of a stateless widget known as GreenFrog.

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

The MyApp class is a Stateless Widget and Widget build is a method with BuildContext as a parameter that returns widgets. Every widget while entering the Widget build(Build Context context) has to override it in order to enter the widget tree. Some Examples of a stateless widget are Text, IconButton, AppBar, etc. Build Method is called inside a stateless widget in only three cases:

• Initially in the start when it is built for the very first time while starting the application.
• If the parent widget is changed
• If the inherited widget is changed

How Does a Stateless Widget Work?

Consider a scenario where you want to call your friend using a mobile phone. The UI of your mobile will remains the same i.e. no changes will be done until and unless you yourself do not run any command for calling.  The moment you click on the screen for recent call logs, UI will rebuild itself and open call logs for you i.e. it changes its state. Now, look at the code below

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  void know() {
    // ignore: avoid_print
    print("Button Pressed");
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: ElevatedButton(
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.green)),
            onPressed: know,
            child: const Text(
              ' Stateless Widget Tutorial ',
              style: TextStyle(color: Colors.white),
            ),
          ),
          // RaisedButton class is deprecated and should not be used
          // Use ElevatedButton class instead

          // child: RaisedButton(
          //     padding: EdgeInsets.all(5),
          //     color: Colors.green,
          //     onPressed: know,
          //     child: const Text(
          //     ' Stateless Widget Tutorial ',
          //     style: TextStyle(color: Colors.white),
          //     ),
          // ),
        ),
      ),
    );
  }
}

The control will enter the runApp() through the main. From there it will be redirected to the stateless widget of the MyApp class. The build method will be called the very first-time MyApp stateless widget is built. Every time a widget wants to enter the widget tree, it has to override the Widget build (BuildContext context)method. After that, the control goes to the MaterialApp widget and the rest of the code will be executed. Remember, every time a new widget enters the widget tree, it has to override the build method. 

Output:

The point to be noted in the output is that the raised button is pressed 5 times and every time we get a print statement on the console. What does it mean? It means that the stateless widget is built only once in the beginning, but the widget is built 5 times each time triggering the method know().