Flutter入门项目 计算器 多端开发

61 阅读1分钟

这篇文章给大家带来一个非常简单的Flutter入门项目,一个仅有唯一页面的计算器 ,很适宜新手第一天用来配置跑通Flutter。修改自旧版本的Flutter项目,通过移植到Flutter 3.19.6, Dart 3.3.4重新编译。

预览效果如下: ![计算器](i-blog.csdnimg.cn/blog_migrat… =180x400)


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Container(
            child: new Column(
          children: <Widget>[
            new Container(
              alignment: Alignment.centerRight,
              padding: new EdgeInsets.symmetric(
                vertical: 24.0,
                horizontal: 12.0
              ),
              child: new Text(output, style: new TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                
              ))),
            new Expanded(
              child: new Divider(),
            ),
            

            new Column(children: [
              new Row(children: [
                buildButton("7"),
                buildButton("8"),
                buildButton("9"),
                buildButton("/")
              ]),

              new Row(children: [
                buildButton("4"),
                buildButton("5"),
                buildButton("6"),
                buildButton("X")
              ]),

              new Row(children: [
                buildButton("1"),
                buildButton("2"),
                buildButton("3"),
                buildButton("-")
              ]),

              new Row(children: [
                buildButton("."),
                buildButton("0"),
                buildButton("00"),
                buildButton("+")
              ]),

              new Row(children: [
                buildButton("CLEAR"),
                buildButton("="),
              ])
            ])
          ],
        )));
  }
}

如果使用过程中有疑问欢迎联系我

Github仓库分享: github.com/DodgeHo/Flu…