Mettre à jour le champ de texte dans Flutter lors d'un clic sur le bouton

Question

Je développe une application sur flutter, sur l'écran principal j'ai un bouton qui ouvre un autre écran qui est à l'intérieur d'une méthode. Sur cet écran, je veux faire des calculs comme prendre l'entrée de l'utilisateur et mettre à jour le champ de texte, en cliquant sur le bouton la méthode calculateAmount est appelée qui met à jour la variable total qui se reflète sur le champ de texte mais le champ de texte ne se met pas à jour, il se met à jour seulement en appuyant sur la touche de fin sur le clavier... comment puis-je accomplir cette tâche. Voici mon code :

    import 'package:flutter/material.dart';
    void main() {

      runApp(new MaterialApp(
          debugShowCheckedModeBanner: false,
        home: new homePage()
      ));
    }

    class homePage extends StatefulWidget {

      @override
      homePageState  createState() => new homePageState();
    }
    class homePageState extends State {

    double metal = 0.0;
    double total = 0.0;

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("Titre de l'application",), backgroundColor: Colors.orange),
           body: new Container(
            child: new Center(
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [

                    new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [

                        new Expanded(child: new RaisedButton.icon(
                          color: Colors.orange,
                          icon: const Icon(
                            Icons.info, size: 25.0, color: Colors.white,),
                          label: new Text('Calculer', style: new TextStyle(
                              color: Colors.white
                              )),
                          onPressed: () {
                            calculateWindow();
                          ),),
                   ],
                )
              ],
            )
        ),
      ),
    );
  }
 void calculateWindow(){
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) {
          return new Scaffold(
            appBar: new AppBar(
              title: new Text('Calculateur'),
              backgroundColor: Colors.orange,
            ),
            body: new ListView(
              children: [

                new Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    new Container(
                      height: 50.0,
                      width: 360.0,
                      decoration: new BoxDecoration(
                        color: Colors.orange,
                        shape: BoxShape.rectangle,
                      ),
                      child: new Center(
                        child: new Row(
                          children: [
                            new Expanded(
                              child: new Container(
                                child:  new Text("Or & Argent en Lingots & Bijoux",
                                  style: textStyle,
                                  textAlign: textAlign
                                ),
                              ),
                            ),
                            new Container(
                              height: 40.0,
                              width: 80.0,
                              decoration:  new BoxDecoration(
                                  color: Colors.white),
                              child: new TextField(
                                  keyboardType: TextInputType.number,
                                  onSubmitted : (String value) {
                                    try {
                                      metal = double.parse(value.toString());
                                      print(total);
                                    } catch (exception) {
                                      metal = 0.0;
                                    }
                                  }
                              ),
                            ),
                          ],
                        ),
                      ),
                      ),

                  ],
                new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    new Expanded(
                      child: new Container(
                          width: 50.0,
                          child: new RaisedButton.icon(
                            color: Colors.grey,
                            icon: const Icon(
                              Icons.check, size: 25.0, color: Colors.white,),
                            label: new Text('Calculer', style: new TextStyle(
                                color: Colors.white,
                               )),
                            onPressed: calculateAmount,
                          ),
                      ),
                    ),
                  ],
                ),
                new Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    new Container(
                      height: 50.0,
                      width: 350.0,
                      decoration: new BoxDecoration(
                        color: Colors.blueGrey,
                        shape: BoxShape.rectangle,
                      ),
                      child: new Center(
                        child: new Row(
                          children: [
                            new Expanded(
                              child: new Container(
                                child:  new Text("Montant Total:",
                                  style: new TextStyle(
                                  color: Colors.white,),
                                  textAlign: TextAlign.left,),
                              ),
                            ),
                            new Container(

                              child: new Text(
                                '$total',
                                textAlign: TextAlign.left,
                                overflow: TextOverflow.ellipsis,
                                style: textStyle,
                                textDirection: TextDirection.ltr,
                              )
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }
 void calculateAmount(){

    setState((){
      total =  metal + 0.025;

    });
  }
}

Answer 1

Je ne comprends pas vraiment quel est le résultat souhaité que vous voulez, mais cet exemple peut être utile pour vous montrer où les choses ont mal tourné dans votre code.

class TextFieldEx extends StatefulWidget {
  @override
  _TextFieldExState createState() => new _TextFieldExState();
}

class _TextFieldExState extends State {
  TextEditingController _c ;
  double _metal = 0.0;
  double _total = 0.0;
  String _text = "initial";
  @override
  void initState() {
      _c = new TextEditingController();
      super.initState();
    }

  @override
  void dispose(){
   _c?.dispose();
   super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new TextField(
              keyboardType: TextInputType.number,
              onChanged: (v)=>setState((){_text=v;}),
              controller: _c,
            ),
            new RaisedButton(
              child: new Text("Mettre à jour"),
              onPressed: (){
                setState((){
                  _metal = double.parse(_c.text);
                  _total = _metal+0.025;
                  _c.text = "";
                });
              },
            ),
            new Text("Entrée de texte : $_text"),
            new Text("Métal :$_metal"),
            new Text("Total :$_total")
          ],
        )
      )
    );
  }
}

Answer 2

Il y a beaucoup de problèmes avec votre code.

1. Si vous voulez lire des données à partir d'un TextField, utilisez un contrôleur.
2. Lorsque le bouton est pressé, effectuez le calcul dans la méthode setState().
3. Comme vous voulez afficher à nouveau la valeur calculée dans le Text, vous devez créer un StateFullWidget de sorte que, en appelant setState(), il se re rendra et la valeur mise à jour sera affichée.

J'espère que cela vous aidera.