mise à jour du champ de texte en flottement au clic sur le bouton
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 donc faire un calcul comme prendre la saisie de l'utilisateur et mettre à jour le champ de texte, en cliquant sur le bouton, la méthode CalculateAmount 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 ne se met à jour qu'en appuyant sur terminé sur le clavier ... comment peut-on 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<homePage> {
double metal = 0.0;
double total = 0.0;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("APP-Title",), backgroundColor: Colors.orange),
body: new Container(
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(child: new RaisedButton.icon(
color: Colors.orange,
icon: const Icon(
Icons.info, size: 25.0, color: Colors.white,),
label: new Text('Calculate', 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('Calculator'),
backgroundColor: Colors.orange,
),
body: new ListView(
children: <Widget>[
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 50.0,
width: 360.0,
decoration: new BoxDecoration(
color: Colors.orange,
shape: BoxShape.rectangle,
),
child: new Center(
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
child: new Text("Gold & Silver in Sold & Ornaments",
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: <Widget>[
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('Calculate', style: new TextStyle(
color: Colors.white,
)),
onPressed: calculateAmount,
),
),
),
],
),
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 50.0,
width: 350.0,
decoration: new BoxDecoration(
color: Colors.blueGrey,
shape: BoxShape.rectangle,
),
child: new Center(
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
child: new Text("Total Amount:",
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;
});
}
}
Je ne comprends pas vraiment quelle est la sortie souhaitée, 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<TextFieldEx> {
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: <Widget>[
new TextField(
keyboardType: TextInputType.number,
onChanged: (v)=>setState((){_text=v;}),
controller: _c,
),
new RaisedButton(
child: new Text("Update"),
onPressed: (){
setState((){
_metal = double.parse(_c.text);
_total = _metal+0.025;
_c.text = "";
});
},
),
new Text("Text Input: $_text"),
new Text("Metal :$_metal"),
new Text("Total:$_total")
],
)
)
);
}
}
Il y a beaucoup de problèmes avec votre code.
- Si vous souhaitez lire les données de TextField, utilisez le contrôleur.
- On Button Pressed fait le calcul dans la méthode setState ().
- Comme vous voulez afficher à nouveau la valeur calculée dans le texte, vous devez créer un StateFullWidget pour que, lors de l'appel à setState (), il soit restitué et la valeur mise à jour soit affichée.
J'espère que cela vous aidera.