Flutter-将计算作为文本传递到其他屏幕

时间:2020-08-14 14:54:34

标签: flutter dart calculation

我是Flutter的新手,并且一般来说都在编码,我正在构建我的第一个简单的华氏温度转换为摄氏温度(反之亦然)的温度转换器应用程序。

我希望我的应用做什么:

用户需要在文本字段中输入数字值,然后单击按钮。单击按钮后,需要将用户转移到第二个屏幕,并使用一个简单的文本小部件显示转换结果。

我已经构建了所有这些。我唯一的问题是实际结果没有显示在第二个屏幕上。现在,在文本字段中输入的值只是简单地传递到第二个屏幕上。它没有进行计算。我可以显示一个警报对话框,该对话框可以正常工作并显示正确的计算结果,但是我只想在第二个屏幕上显示一个简单的文本,而不是该文本,对我不起作用。

帖子所附的屏幕截图。

有人可以帮我解决这个问题吗?谢谢。

Screenshot

main.dart:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:temp_conversion/screentwo.dart';
import 'assets/global.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  build(BuildContext context) {
    return MaterialApp(
      home: TempApp(),
    );
  }
}

class TempApp extends StatefulWidget {
  @override
  TempState createState() => TempState();
}

class TempState extends State<TempApp> {

  String value;
  double input;
  double output;
  bool fOrC;

  @override
  void initState() {
    super.initState();
    input = 0.0;
    output = 0.0;
    fOrC = true;
  }



                                           // SEARCH BAR
  @override
  Widget build(BuildContext context) {

    CupertinoTextField inputField = CupertinoTextField(

      padding: EdgeInsets.all(7),
      keyboardType: TextInputType.numberWithOptions(decimal: true),
      onChanged: (text) {
        value = text;
        try {
          input = double.parse(text);
        } catch (e) {
          input = 0.0;
        }
        },

      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(17),
        ),
      ),

      placeholder: "Value in ${fOrC == true ? 'Fahrenheit' : 'Celsius'}",
//      textAlign: TextAlign.center,
    );





                                        // (INVISIBLE) APP BAR
    AppBar appBar = AppBar(
      backgroundColor: Colors.white,
      elevation: 0,
    );




                                                //RADIO
    Container tempSwitch = Container(
      padding: EdgeInsets.all(10.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Fahrenheit", style: textSwitch),
          Radio<bool>(
              groupValue: fOrC,
              value: false,
              onChanged: (v) {
                setState(() {
                  fOrC = v;
                });
              }),
          Text("Celsius", style: textSwitch),
          Radio<bool>(
              groupValue: fOrC,
              value: true,
              onChanged: (v) {
                setState(() {
                  fOrC = v;
                });
              }),
        ],
      ),
    );


                                                  // WHITE CONTAINER AND TITLE
Container whiteContainer = Container(
  child: Container(
    padding: EdgeInsets.only(left: 40),
    child: Row(
      children: <Widget>[
        Text(
          'Convert it',
          style: titleBar,
        ),
      ],
    ),
    height: 200,
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.4),
          spreadRadius: 5,
          blurRadius: 10,
        )
      ],
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(30),
        bottomRight: Radius.circular(30),
      ),
      color: Colors.white,
    ),
  ),
);




                                            // DESCRIPTION
Container descText = Container(
  padding: EdgeInsets.only(top: 40, bottom: 15, right: 100),
  child: Text('Write down your value below:', style: description,),
);




                                                  // GO BUTTON
    Container calcBtn = Container(
      child: CupertinoButton(
        child: Text("Go"),
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.circular(24)),
        onPressed: () {

          setState(() {
              fOrC == false
                  ? output = (input - 32) * (5 / 9)
                  : output = (input * 9 / 5) + 32;



          });

          Navigator.of(context).push(
            MaterialPageRoute(
                builder: (context) => screentwo(value : value)
            ),
          );
//          AlertDialog dialog = AlertDialog(
//            content: fOrC == false
//                ? Text(
//                "${input.toStringAsFixed(2)} F : ${output.toStringAsFixed(2)} C")
//                : Text(
//                "${input.toStringAsFixed(2)} C : ${output.toStringAsFixed(2)} F"),
//          );
//          showDialog(context: context, child: dialog);

        },
      ),
    );
                                                  // WIDGET TREE
    return Scaffold(
      backgroundColor: Colors.grey[300],
      appBar: appBar,
      body: Container(
//        padding: EdgeInsets.all(20.0),    CHANGE THIS IF NOT DISPLAYING CORRECTLY
        child: Column(
          children: <Widget>[



            whiteContainer,
            descText,
            inputField,
            tempSwitch,
            calcBtn,
          ],
        ),
      ),
    );
  }
}

screentwo.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main.dart';

class screentwo extends StatefulWidget {

String value;
screentwo({this.value});


  @override
  _screentwoState createState() => _screentwoState(value);
}

class _screentwoState extends State<screentwo> {
  String value;
  _screentwoState(this.value);
  @override

  Widget build (BuildContext context) {  //THIS IS SECOND SCREEN
    return Scaffold(
      body: Center(
        child: Text(value),
      ),
    );

  }
}

1 个答案:

答案 0 :(得分:0)

根据您的代码,只需替换要在main.dart中输出的值即可。

Navigator.of(context).push(
            MaterialPageRoute(
                builder: (context) => screentwo(value : output)
            ),
          );
相关问题