How does the stateful vs. stateless distinction affect when widgets will be rebuilt?

Question

I am trying to understand how state and lifting state works in Flutter. In the code below I made a simple app where I tried to pass or lift a string and a function through multiple levels.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class _MyAppState extends State<MyApp> {
  String data = 'MyApp class data';

  void setTextField(String s) {
    setState(
      () {
        data = s;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainApp(data, setTextField),
    );
  }
}

class MainApp extends StatelessWidget {
  final String mainAppData;
  final Function setTextField;
  MainApp(this.mainAppData, this.setTextField);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(mainAppData)),
      body: Container(
        child: Level2(mainAppData, setTextField),
      ),
    );
  }
}

class Level2 extends StatelessWidget {
  final String level2Data;
  final Function setTextField;
  Level2(this.level2Data, this.setTextField);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Level3(level2Data, setTextField),
    );
  }
}

class Level3 extends StatefulWidget {
  final String level3Data;
  final Function setTextField;
  Level3(this.level3Data, this.setTextField);

  @override
  _Level3State createState() {
    print('Level3: $this.level3Data');
    return _Level3State(this.level3Data, this.setTextField);
  }
}

class _Level3State extends State<Level3> {
  String level3Data;
  Function setTextField;
  _Level3State(this.level3Data, this.setTextField);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          onChanged: setTextField,
        ),
        Text(level3Data),
      ],
    );
  }
}

When the app starts, the string data in the _MyAppState state class is passed to the MainApp StatelessWidget when MainApp is built. In a similar manner, info is passed then to Level2 StatelessWidget and Level3 StatefulWidget.

When the TextField in Level3 changes, setTextField is triggered. setTextField is defined up in MyApp and I figured that when the String data changes (inside setState()) it should trigger rebuilding of all the widgets affected by the change.

The text in the MainApp widget (appBar) changes, showing MainApp was rebuilt as I expected. But nothing happens to the Level3 widget; it's not rebuilt. The print statement in the createState() method does not execute, and the Text widget's text does not change.

Why doesn't the Level3 StatefulWidget rebuild?

You should not add constructors to `State`. See https://stackoverflow.com/questions/50818770/passing-data-to-a-stateful-widget/50818870#50818870 — Rémi Rousselet, Dec 01 '19 at 21:53
Thanks Remi. In your link I see there is a comment "...anything you pass to a State object through the constructor won't ever get updated" Might that be connected to my question? — Al C, Dec 01 '19 at 22:23
Yes, that is related. Do what this answer suggests (no constructor, use `widget` property instead). This should solve your issue — Rémi Rousselet, Dec 01 '19 at 22:25
Yes, it did solve the issue! So, I guess the stateful widget object is not rebuilt--it is immutable, with `final` properties. But the State object's properties can change(?). If you explain what's going on as an answer below I will be happy to accept it. ... Thank you again for the kindness of replying. — Al C, Dec 01 '19 at 22:46

p2hari · Accepted Answer · 2019-12-02T09:22:41.393

In my understanding, the stateful widget Level3 is already created at the given location in the tree. And according to the contract of the stateful widget, It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState. So in your case you need to have setstate in level3 to be notified of the change again. The rebuilding only happens at level 1 because setState is called .

The rebuilding process continues recursively until the description of the user interface is fully concrete. In Level 3, the class has its own set of fields String level3Data; Function setTextField; It means these need to be again set using SetState or if you do something like this then the widget building continues.

class Level3 extends StatefulWidget {
  final String level3Data;
  final Function setTextField;
  Level3(this.level3Data, this.setTextField);

  @override
  _Level3State createState() {
    print('Level3: $this.level3Data');
    return _Level3State();
  }
}

class _Level3State extends State<Level3> {
  // String level3Data;
  // Function setTextField;

  @override
  Widget build(BuildContext _) {
    return Column(
      children: <Widget>[
        TextField(
          onChanged: widget.setTextField,
        ),
        Text(widget.level3Data),
      ],
    );
  }
}

Thanks for responding. As I understand it, setState is in MyApp's state, but the widget MainApp (i.e., a different widget from where setState is located) _is_ rebuilt. I know this because the title text changes....Is my understanding off? — Al C, Dec 01 '19 at 22:18
edited my answer a little bit :). I hope it helps your understanding. — p2hari, Dec 02 '19 at 09:23

How does the stateful vs. stateless distinction affect when widgets will be rebuilt?

1 Answers1