CODEWITHSUNDEEP
dartflutterstatefulwidget
Neo
Neo

Reputation: 3786

Understanding the use of StatefulWidget in Flutter

I'm just starting to fiddle with Flutter and I can't understand the point of StatefulWidget. All those widgets do anywhere I've seen in tutorials etc. is instantiate a State<MyWidget> and let it do all the work.
For example, from this (official) tutorial:

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
  ...
}

What I want to know is why is it built like that and what is the use of the outer class (in my example RandomWords).

Thanks in advance.

Upvotes: 5

Views: 3464

Answers (4)

mishalhaneef
mishalhaneef

Reputation: 852

stateless widget is like constant display, like only to display something stateful is for changable display, i mean if any value has to change in that screen then it should be stateful

Upvotes: 0

Sriram S
Sriram S

Reputation: 31

In Flutter to build the UI, we use two main types of widgets, StatelessWidget and StatefulWidget. The stateful widget is used when the values (state) of a widget changes or has a mutable state that can change over time.

Some important properties of stateful widgets

  • A Stateful widget is mutable. It keeps track of the state.
  • A Stateful widget’s build() method is called multiple times.
  • It rebuilds several times over its lifetime.

Some examples of stateful widgets

  • Checkbox: Keeps its state whether a checkbox is checked or not.

  • Radio: Keep its state if it’s selected or not.

    class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
  }

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
@override
Widget build(BuildContext context) {
return Container();
}
}

The stateful widget is declared with two classes, the StatefulWidget class and the State class. The StatefulWidget class is rebuilt when the widget’s configuration changes, but the State class can persist (remain).

For example, when the state changes, the widget is rebuilt. If the StatefulWidget is removed from the tree and then inserted back into the tree some time later,then a new State object is created.

Upvotes: 1

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126624

The "outer class" is final, every widget is final (immutable). This means that all its properties have to be final as well:

class RandomWords extends StatefulWidget {
  final String name;

  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  String name;

  @override
  void initState() {
    name = widget.name;
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Text(name);

  void someMethod() {
    print(widget.name);
    setState(() => name = 'new name');
  }
}

From the State all fields of the StatefulWidget can be accessed and obviously not changed because they are final.

State's, however, can change data. setState will execute its callback and then rebuild the State (with the new data).

StatelessWidget's can also be rebuilt, i.e. when its parent is rebuilding, but all state is lost and no data is kept. That is what State's are being used for.

Upvotes: 7

Prince Hodonou
Prince Hodonou

Reputation: 635

From what I understand, it's to save information about the widget. So you implement setState everytime you want to save a variable or something. See the tutorial about adding interactivity in Flutter.

Upvotes: 0

Related Questions