Flutter - Radio Animation is not showing up on showDialog

Question

I'm trying to create a Radio in a showDialog, however the animation that occurs on Radio does not appear in showDialog.

For example: when tapped in foo2 nothing happens, and when you exit in showDialog and go back to it, foo2 is selected.

Below is the code and a gif showing what is happening:

import "package:flutter/material.dart";

void main() {
  runApp(new ControlleApp());
}

class ControlleApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "My App",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

enum _RadioGroup {
  foo1,
  foo2
}

class HomePageState extends State<HomePage> {
  _RadioGroup _itemType = _RadioGroup.foo1;

  void changeItemType(_RadioGroup type) {
    setState(() {
      _itemType = type;
    });
  }

  void showDemoDialog<T>({ BuildContext context, Widget child }) {
    showDialog<T>(
      context: context,
      child: child,
    );
  }

  @override
  Widget build(BuildContext context){
    return new Scaffold( 
      appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
      body: new Container(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new InkWell(
              onTap: (){
                showDemoDialog<String>(
                  context: context,
                  child: new SimpleDialog(
                    title: const Text("show"),
                    children: <Widget>[
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Radio<_RadioGroup>(
                            groupValue: _itemType,
                            value: _RadioGroup.foo1,
                            onChanged: changeItemType
                          ),
                          const Text("foo1"),

                          new Radio<_RadioGroup>(
                            groupValue: _itemType,
                            value: _RadioGroup.foo2,
                            onChanged: changeItemType
                          ),
                          const Text("foo2"),
                        ],
                      )
                    ],
                  )
                );
              },
              child: new Container(
                margin: new EdgeInsets.only(top: 16.0, bottom: 8.0),
                child: new Text("Show"),
              ),
            )
          ],
        ),
      )
    );
  }
}

Answer 1

Remember that components are immutable. When you call showDialog, the content of that dialog won't change even if HomePage does.

The solution is easy. You need to refactor a bit your code to something like :

    showDialog(
        context: context,
        builder: (context) => MyForm()
    )

and instead of changing the state of HomePage, you instead change the state of MyForm.

example :

class Test extends StatelessWidget {
  void onSubmit(String result) {
    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () => showDialog(context: context, builder: (context) => MyForm(onSubmit: onSubmit)),
          child: Text("dialog"),
        ),
      ),
    );
  }
}

typedef void MyFormCallback(String result);

class MyForm extends StatefulWidget {
  final MyFormCallback onSubmit;

  MyForm({this.onSubmit});

  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  String value = "foo";

  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
      title: Text("My form"),
      children: <Widget>[
        Radio(
          groupValue: value,
          onChanged: (value) => setState(() => this.value = value),
          value: "foo",
        ),
        Radio(
          groupValue: value,
          onChanged: (value) => setState(() => this.value = value),
          value: "bar",
        ),
        FlatButton(
          onPressed: () {
            Navigator.pop(context);
            widget.onSubmit(value);
          },
          child: new Text("submit"),
        )
      ],
    );
  }
}