Flutter - Animation par radio n'apparaît pas sur showDialog

Question

J'essaye de créer un Radio dans un showDialog, cependant l'animation qui se produit sur Radio n'apparaît pas dans . Par exemple: lorsque vous appuyez sur foo2, rien ne se passe, et lorsque vous quittez showDialog et que vous revenez à celui-ci, foo2 est sélectionné.

Ci-dessous le code et un gif montrant ce qui se passe:

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

Rappelez-vous que les composants sont immuables. Lorsque vous appelez showDialog, le contenu de ce dialogue ne changera pas même si HomePage le fait.

La solution est facile. Vous avez juste besoin de factoriser un peu votre code à quelque chose comme:

showDialog(
     context: context, 
     child: new MyForm() 
    ) 

et au lieu de changer l'état de HomePage, vous changez au lieu de l'état de MyForm.

exemple:

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

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

typedef void MyFormCallback(String result); 

class MyForm extends StatefulWidget { 
    final MyFormCallback onSubmit; 

    MyForm({this.onSubmit}); 

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

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

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