flutter - How to redraw StatefulWidget

Question

On the example below, since MyStatefulWidget has a state, it doesn't matter if setState is called on _MyAppState, because it will not be redrawn.

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  int value = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('App Example')),
        body: Row(children:[
          MyStatefulWidget(title: value.toString()), 
          RaisedButton(
            textColor: Colors.white,
            color: Colors.blue,
            onPressed: (){setState(() { value+=1; });},
            child: new Text("Add"),
          )
        ]),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key, this.title}):super(key: key);
  final String title;
  
  @override
  State<StatefulWidget> createState() {
    return _MyStatefulWidgetState();
  }
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String title;
   @override
  void initState() {
    super.initState();
    if (widget.title!=null) {
      title = widget.title;
    } else {
      title = "";
    }
  }
  int value = 0;
  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

If I used a StatelessWidget it'd be redrawn, but this is just an example, there are cases where I need to redraw a StatefulWidget when setState is called.

One option would be to give it a name and build it from the setState, but I need it to be draw in the place where it's draw right now.

Dartpad: https://dartpad.dev/968be8755d5deab1ca5c8c84a993eafc

Answer 1

You could directly use widget.title in the Text widget to update the counter on screen. Please see the code below :

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  void changeVal(int val) {
    setState(() {
      value = val;
    });
  }

  int value = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('App Example')),
        body: Row(children: [
          MyStatefulWidget(
              title: value.toString(),
              groupValue: value % 10,
              chnageVal: changeVal),
          RaisedButton(
            textColor: Colors.white,
            color: Colors.blue,
            onPressed: () {
              setState(() {
                value += 1;
              });
            },
            child: const Text("Add"),
          )
        ]),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key key, this.title, this.groupValue, this.chnageVal})
      : super(key: key);
  final String title;
  final int groupValue;
  final Function(int) chnageVal;

  @override
  State<StatefulWidget> createState() {
    return _MyStatefulWidgetState();
  }
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  //String title;
  // @override
  // void initState() {
  // super.initState();
  // if (widget.title!=null) {
  //   title = widget.title;
  // } else {
  //  title = "";
  // }
  // }
  //int value = 0;

  List<int> numbers = List.generate(10, (index) => index);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 120,
      child: Column(children: [
        Text(widget.title),
        ...numbers
            .map((number) => RadioListTile<int>(
                  title: Text('$number'),
                  value: number,
                  groupValue: widget.groupValue,
                  onChanged: (val) {
                    widget.chnageVal(val);
                  },
                ))
            .toList()
      ]),
    );
  }
}