SetState не обновляет переменную в текстовом виджете

Question

У меня возникла проблема, когда я пытаюсь создать виджет с калькулятором с сохранением состояния (BMIState); Я не могу увидеть результат вычисления после вызова метода calc ().

Ожидаемое поведение - виджет Text, который вызывает result.toString(), будет отображать результат вычисления на основе входных данных из два текстовых контроллера.

Однако даже после вызова calculate() и изменения значения result с использованием setState() виджет «Текст» по-прежнему возвращает «результат» в виде toString своего инициализированного значения (то есть null ).

import 'package:flutter/material.dart';

class BMIPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BMIState();
}

class BMIState extends State {
  TextEditingController mController = TextEditingController();
  TextEditingController kgController = TextEditingController();
  double result = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
            child: ListView(
              children: <Widget>[
                Column(
                  children: <Widget>[
                    TextField(
                      controller: mController,
                      keyboardType: TextInputType.number,
                      ),
                    ),
                        child: TextField(
                          controller: kgController,
                          keyboardType: TextInputType.number,),
                       ),
                    FlatButton(
                      onPressed: () {
                        calculate();
                      },
                    ),
                    Column(
                      children: <Widget>[
                        Text(
                          "BMI",
                          style: TextStyle(
                              fontSize: 40, fontWeight: FontWeight.w600, color: Colors.orangeAccent),
                        ),
                        Text(
                          result.toString(),
                          style: TextStyle(
                              fontSize: 40, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ],             
              ],
            )));
  }
  void calculate() {
    double height = double.tryParse(mController.text);
    double weight = double.tryParse(kgController.text);

    setState(() {
      result = weight ~/ height * height;
    });
  }
}

Answer 1

Вы можете скопировать и вставить полный код ниже
Шаг 1: Вам нужно использовать class BMIState extends State<BMIPage> { не class BMIState extends State {

Шаг 2: Scaffold body не child

рабочая демо

полный код

import 'package:flutter/material.dart';

class BMIPage extends StatefulWidget {
  @override
  BMIState createState() => BMIState();
}

class BMIState extends State<BMIPage> {
  TextEditingController mController = TextEditingController();
  TextEditingController kgController = TextEditingController();
  double result = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(children: <Widget>[
      Column(
        children: <Widget>[
          TextField(
            controller: mController,
            keyboardType: TextInputType.number,
          ),
          TextField(
            controller: kgController,
            keyboardType: TextInputType.number,
          ),
          FlatButton(
            child: Text("calculate"),
            onPressed: () {
              calculate();
            },
          ),
          Column(
            children: <Widget>[
              Text(
                "BMI",
                style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w600,
                    color: Colors.orangeAccent),
              ),
              Text(
                result.toString(),
                style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ],
      )
    ]));
  }

  void calculate() {
    double height = double.tryParse(mController.text);
    double weight = double.tryParse(kgController.text);

    print(mController.text);
    print(kgController.text);
    setState(() {
      result = weight ~/ height * height;
    });

    print(result);
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BMIPage(),
    );
  }
}