How to create Stateless Widget in Flutter with Steps

Flutter is an open-source UI SDK that allows you to build cross-platform apps like mobile apps, desktop apps e.t.c. You can build apps for most of the operating systems like windows, Linux, web e.t.c. Flutter is all about widgets. There are many widgets in the flutter that makes UI very interactive. You can also make your own stateless widget. In this entire tutorial, you will learn how to build your own Flutter Stateless Widget.

Steps to Build Flutter Stateless Widget

In this section, you will know all the steps to build a Stateless Widget in Flutter. Please note that I am doing all the coding things on Android Studio. You can download it from Android Offical Website.

Step 1: Import the necessary library

The first step is to import the material design package. As it is a must for making and accessing any widgets in Flutter let’s import it.

Step 2: Create a Stateless Widget

After importing the necessary library let’s create a Stateless widget. In flutter, you can create your stateless widget by extending the StatelessWidget class. And also you have to override the build() method. Suppose I want to add text buttons inside the body. Then I will execute the below lines of code.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Code The Best"),
        ),
        body: Center(
          child: Column(
            children: [
              TextButton(
                onPressed: () {

                },
                child: Text("Login"),
              ),
              TextButton(
                onPressed: () {},
                child: Text("Register"),
              )
            ],
          ),
        ),
      ),
    );


  }

}

Explanation of the Code

Here I am creating MyApp class that is extending the StatelessWidget. After extending I am overriding the build()  method and returning the MaterialApp(). Inside the app, there will be an app bar (AppBar() )  with text on it. There is a text button(TextButton)  inside the body of the app Login and Register. Currently, the button doesn’t do anything. But you can add some lines of code inside the onPressed to manipulate it.

Step 3: Run the Widget

After creating a stateless widget, you can run the app bypassing the name of the Widget ( MyApp() ) inside the run() method. Execute the below lines of code.

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

Below is the complete code for the example explained here. Run the code and see the output.

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("Code The Best"),
        ),
        body: Center(
          child: Column(
            children: [
              TextButton(
                onPressed: () {},
                child: Text("Login"),
              ),
              TextButton(
                onPressed: () {},
                child: Text("Register"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Output

Conclusion

Stateless Widget is created when you know that Widget doesn’t change with the user input. There is another widget that stateful widget that interacts with the user input. These are the steps to create a stateless widget in Fluter. I hope you have liked this article. If you have any queries then you can contact us for more help.

Source:

Flutter Stateless Widget Documentation