How to create a flutter Stateful Widget : 4 Steps Only

Stateless Flutter Widget is created when you don’t want to interact with the user inside the UI and input data doesn’t change. But in case you want to interact with the user and show the changes to the User Interface then you have to create a Stateful widget. In this entire tutorial, you will know how to create a flutter stateful widget with steps.

Steps to Create a Stateful Widget

Before going to the steps part, you should know what are the things I am doing in this tutorial. In this example I will create a stateful widget that will have a Text button and when you click that button the size of the text button will increase. Let’s get started.

Step 1: Import the Required Package

In flutter, most of the widgets come with the material design. So let’s import the material design package.

import 'package:flutter/material.dart';

Step 2: Create a flutter StatefulWidget extended Class

In this step, You will first create a class that extends the StatefulWidget Class. Inside the class, you will override the createState() function that will return the state of your custom widget. Execute the below lines of code to create a stateful class.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() {
    return _MyAppState();
  }
}

Step 3: Create State for the Class

After creating the stateful widget in step 2, now you have to create a state for the above class. It will contain all the logics that you want to manipulate the widget. Inside the class, you have to override the build() method. Use the below lines of code.

class _MyAppState extends State {
  double _size = 10;
  void changeTextSize()  {
    setState(() {
      _size += 10;
    });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("My Stateful Widget"),
        ),
        body: Center(
          child: Container(
            child: TextButton(
              child: Text("Hello!",style: TextStyle( fontSize: _size),),
              onPressed: changeTextSize,

            ),
          ),
        ),
      )
    );
 }
}

Explanation of the code

Inside the state class, I am creating a function changeTextSize() that will change the size of the text. Flutter provides setState() method to change anything you want for the stateful widget. After that, I am overriding the build() method and returning the MaterialApp. The body will contain a container and inside the container, a text button has been created. The size of the button is increased when you click the button as it calls the changeTextSize() function.

Step 4: Run the App

After all the above steps now let’s run the app. Run the code given below.

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

Complete Code

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State {
  double _size = 10;

  void changeTextSize() {
    setState(() {
      _size += 10;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("My Stateful Widget"),
      ),
      body: Center(
        child: Container(
          child: TextButton(
            child: Text(
              "Hello!",
              style: TextStyle(fontSize: _size),
            ),
            onPressed: changeTextSize,
          ),
        ),
      ),
    ));
  }
}

Output

Conclusion

Stateful widget in Flutter has mostly used widgets. As in a real-life example app, you have to interact with the user and so its interface must be dynamic. You don’t have to build the entire widget if something changes in the widget. That’s why it increases the performance of the app. In a stateless widget, the entire build method is called again for any interaction.

Hope you have liked this tutorial on how to create a flutter stateful widget. If you have any queries then you can contact us for more help.

Source:

StatefulWidget Class