Stateful Widget child is not updated

Question

There are two stateful widgets. The state of MyHomePage contains the counter. The MyHomePage wraps content in a second stateful widget SubPage. The SubPage has a child widget with data from the MyHomePage.

To clarify the problem, the first textwidget which is inside of the SubPage child doesn't update when the counter changes.

The textwidget outside of the SubPage increments as expected.

What do we have to do if we want the content of the inner stateful widget updated?

We have to use a stateful widget there. In the real application this widget has a real use-case.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          SubPage(
            child: new Center(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Text(
                    'You have pushed the button this many times:',
                  ),
                  new Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.display1,
                  ),
                ],
              ),
            ),
          ),
          new Text(
            '$_counter',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),

      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class SubPage extends StatefulWidget {
  SubPage({Key key, this.child}) : super(key: key);

  final Widget child;

  @override
  SubPageState createState() => new SubPageState(child);
}

class SubPageState extends State<SubPage> {
  final Widget child;

  SubPageState(this.child);

  @override
  Widget build(BuildContext context) {
    print("subpage build");
    return this.child;
  }
}

Answer 1

You don't have to set child as field of state. Actually it is cause of this bug. Here working code

class SubPage extends StatefulWidget {
  SubPage({Key key, this.child}) : super(key: key);

  final Widget child;

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

class SubPageState extends State<SubPage> {
  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}