Flutter-App-login_dice

?使用Android Studio制作Flutter骰子应用

?登录功能

  • 使用controller接收TextField中的输入信息
  • 使用FocusScope.of(context).unfocus()在点击文本框外部区域时隐藏键盘
  • 使用if语句处理，当用户输入的id为非id: dice / pw: 1234时，无法登录
  • 当用户输入指定的id、pw值时，使用Navigator进行页面跳转，进入骰子页面

Navigator.push(context, 
    MaterialPageRoute(builder: (BuildContext context) => Dice()));

Animation3

?掷骰子功能

  • 使用Column和Row小部件来放置骰子图片
  • 为左骰子和右骰子分配随机数，使骰子图片随机变换

setState(() {
    leftDice = Random().nextInt(6) + 1;
    rightDice = Random().nextInt(6) + 1;
});

Image.asset('image/dice$leftDice.png')

Image.asset('image/dice$rightDice.png')
  • 使用吐司消息显示分配的随机数

Animation3

☺新学内容

  • 学会了如何使用Controller处理TextField的内容。
  • 再次体会了在Column和Row小部件中使用mainAxisAlignment:MainAxisAlignment.center的方法。
  • 知道了将图片文件名作为变量处理以改变状态值的方法。（$符号的使用方法）
  • 在pubspec.yaml文件中注册fluttertoast库时遇到的错误，通过查阅官方文档解决。
  • 参考教程的flutter小部件中，对于不支持的小部件，通过查阅官方文档进行修改后运行了代码。
  • 此外，还在学习git和markdown的使用方法。

代码原始出处

<Coding Chef> 制作骰子教程
https://www.youtube.com/playlist?list=PLQt_pzi-LLfoOpp3b-pnnLXgYpiFEftLB

GitHub

查看 Github