即使在分配了默认值后,凸起的按钮也不会显示答案,直到我 select 一个下拉项

raised button does not shows answer until I select a drop down item even after assigning a default value

我正在制作一个简单的 S.I 计算器,其中有一个用于计算本金金额的字段,以及时间以及 select 货币的下拉菜单。
问题是当我按下 'calculate' RaisedButton(查看图像可能有帮助)时屏幕上没有任何显示(最初我认为按钮有问题但后来)我发现按下 RaisedButton 后如果我 select从下拉列表中输入任何项目然后出现答案为什么会这样,我将初始值设置为_selected = 'Rupee'我做错了什么吗?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Simple Intrest Calculator',
      home: MyHomePage(),
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.indigo,
        accentColor: Colors.indigoAccent,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _currencies = ['Rupee', 'Dollar', 'Pound'];
  final _minPadding = 5.0;
  var _selected = 'Rupee';

  TextEditingController principalCntr = TextEditingController();
  TextEditingController roiCntr = TextEditingController();
  TextEditingController termCntr = TextEditingController();
  
  String _amount = '0';
  
  @override
  Widget build(BuildContext context) {
    
    TextStyle styles = Theme.of(context).textTheme.headline6;
    
    return Scaffold(
      //resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('S.I Calculator'),
        centerTitle: true,
      ),
      body: Container(
        margin: EdgeInsets.symmetric(vertical: 0, horizontal: _minPadding * 2),
        child: ListView(
          children: [
            getImg(),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: TextField(
                controller: principalCntr,
                keyboardType: TextInputType.number,
                style: styles,
                decoration: InputDecoration(
                  labelText: 'Principal',
                  hintText: 'Enter principal amount',
                  labelStyle: styles,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: TextField(
                controller: roiCntr,
                keyboardType: TextInputType.number,
                style: styles,
                decoration: InputDecoration(
                  labelText: 'Intrest',
                  hintText: 'Enter intrest rate',
                  labelStyle: styles,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: termCntr,
                      keyboardType: TextInputType.number,
                      style: styles,
                      decoration: InputDecoration(
                        labelText: 'Time',
                        hintText: 'Time in years',
                        labelStyle: styles,
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(5.0),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(width: 50,),
                  Expanded(
                    child: DropdownButton(
                      value: _selected,
                      onChanged: (newVal) {
                        setState(() {
                          _selected = newVal;
                        });
                      },
                      items: _currencies.map((selectedVal) {
                        return DropdownMenuItem(
                          value: selectedVal,
                          child: Text(selectedVal),
                        );
                      }).toList(),
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    child: RaisedButton(
                      color: Theme.of(context).accentColor,
                      textColor: Theme.of(context).primaryColor,
                      child: Text('Calculate'),
                      onPressed: (){
                        _amount = _calculateReturns();
                      },
                    ),
                  ),
                  SizedBox(width: 20),
                  Expanded(
                    child: RaisedButton(
                      color: Theme.of(context).primaryColorDark,
                      textColor: Theme.of(context).primaryColorLight,
                      child: Text('Clear', style: TextStyle(fontSize: 20,),),
                      onPressed: (){
                        debugPrint('pressed');
                      },
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(_amount, style: styles,),
            ),
          ],
        ),
      ),
    );
  }

  String _calculateReturns(){
    double principal = double.parse(principalCntr.text);
    double roi = double.parse(roiCntr.text);
    double year = double.parse(termCntr.text);

    double sI = principal + (principal*roi*year)/100;
    String res = 'After $year years, you get $sI';
    return res;
  }

  Widget getImg() {
    AssetImage img = AssetImage('images/money.jpg');
    Image image = Image(image: img, width: 125, height: 125);
    return Container(
      child: image,
      margin: EdgeInsets.all(_minPadding * 10),
    );
  }
}

这是在我点击 Raised Button 之后

这是在我 select 下拉列表中的一个项目之后,但不要再次单击该按钮:

代码演练:

  1. 列出了 _currencies。
  2. 添加了文本输入字段下拉按钮和两个凸起按钮。
  3. 按下计算按钮时 _calculateReturns() 被调用,其中 returns 一个值并将其存储在 _amount
  4. 输出只是一个文本小部件。

您在按下按钮时忘记更新屏幕,请记住每次您需要更改页面内容或更新它时都必须调用该方法:

       setState(() {   
       
       // code here for values to be updated
       });

所以在你的 Raised 按钮的 onPressed 函数中你必须这样添加它:


 onPressed: (){
    _amount = _calculateReturns();
    setState(() {    });
               }