Create stateful widget in Flutter

Last Updated: September 13, 2022 flutter Share on :

In this tutorial, we will learn how to create a stateful widget in Flutter. A stateful widget is a widget that has a mutable state. The state of a widget can change during the lifetime of the widget. For example, if a widget is a counter, the state of the widget is the current count. When the user presses a button, the state of the widget changes, and the widget is rebuilt with the new state.

class WidgetName extends StatefulWidget {
  const WidgetName({ super.key });

  @override
  State<WidgetName> createState() => _WidgetNameState();
}

class _WidgetNameState extends State<WidgetName> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFFFFE306));
  }
}

Stateful widgets are used to define states in Flutter that can be modified and bound with other widgets. Creating a stateful widget in flutter is different from creating a stateless widget. You can create stateful widgets by inheriting StatefulWidget class in your class and then create another class for the state definition of this class as created in the code snippet.

In the code snippet, we have created a Fruit class and its state class is _FruitState where we are defining a state _quantity which can be changed on button click.

# code example 2

class Fruit extends StatefulWidget {
    const Fruit({
        Key key,
        this.color = const Color(0xffFF0000),
        this.name,
    }) : super(key: key);

    final Color color;
    final String name;
    
    @override
    _FruitState createState() => _FruitState();
}

class _FruitState extends State<Fruit> {
    double _quantity = 3;

    void increaseQty() {
        setState(() { _quantity += 1; });
    }

    @override
    Widget build(BuildContext context) {
        return Container(
            color: widget.color,
            child: FlatButton(
                onPressed: increaseQty(),
                child: Text(widget.name),
            ),
        );
    }
}

Search Index Data (The code snippet can also be found with below search text)

Stateful widget example in Flutter

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer