Flutter基础介绍与实作-Day15 Onboarding、Login、Sign Up范例实作(2)

了解上面的意思後我们就可以开始了喔，再开始写程序前我们先来做个简单的构思吧！

Login页面构思：由上而下 AppBar，标题，描述文字，email 输入框，密码输入框，(Remember me 和 忘记密码)，登入按钮，使用(google、fb、twitter) 登入按钮，注册连结，这是我大概的想法，大家都可以发挥创意自己增加修改喔！
首先跟昨天一样我要先来新增公用资料夹

再lib资料夹下的constants.dart新增程序码

再来要设定全域的主题，我们会用到我们昨天所说的Theme，所以我们先在lib资料夹下新增theme.dart来存放之後会用到的Theme
theme.dart

再到main.dart作设定

再来就是这次的重点login的部分
先在lib资料夹底下的screens资料夹下新增一个login的资料夹，用来当作存放login画面的地方，然後再建一个login_screen.dart来设定画面，再来再login资料夹底下再建一个components的资料夹，用来放login画面的元件，然後建一个body.dart来处理画面的body、login_form.dart来处理login的表单
这边有点像在绕口令，反正设定完要长这样

接下来要在lib资料夹下的components资料夹里建一个form_error.dart来设计共用表单发生错误时的错误提醒的widget
form_error.dart

login_form.dart

body.dart(这个是指login资料夹下components资料夹里的body.dart，不要搞错了喔！)

login_screen.dart

routes.dart(要把login串上去)

再splash资料夹下的body.dart补上login的连结

这样就完成我的登入页面了喔！
成果如下

完整程序码

今日总结
做完今天的login页面大家觉得怎麽样呢？明天我们会继续补上 忘记密码页、注册页，我们会发现设计模式都差不多，继续动手做，一起征服它吧！