本头条核心宗旨

欢迎来到技术刚刚好头条，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本篇文章中心思想

先来看看效果吧，Flutter实现的一个登录页面，运用到的知识点，

第一：字体在Flutter里面的运用。

第二：简单的跳转动画运用。

第三：路由的运用，和圆形图片的显示。

主页的搭建代码显示

不用多说，看过我之前的文章应该知道这个结构。

导入包名，
StatelessWidget架构，无状态显示框架。
routes：路由跳转页面

登录页面的具体逻辑

下面的两张图片代码很直观，两个登录框代码

final email = TextFormField(
 keyboardType: TextInputType.emailAddress,
 autofocus: false,
 initialValue: 'nhm@gmail.com',
 decoration: InputDecoration(
 hintText: 'Email',
 contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
 border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
 ),
);

运用了Scaffold框架，密码控件。

主页页面的逻辑代码

主页就很简单了，一个Text文本控件的显示。

final welcome = Padding(
 padding: EdgeInsets.all(8.0),
 child: Text(
 '欢迎来到技术刚刚好头条',
 style: TextStyle(fontSize: 28.0, color: Colors.white),
 ),
);

final lorem = Padding(
 padding: EdgeInsets.all(8.0),
 child: Text(
 '欢迎来到技术刚刚好头条，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。',
 style: TextStyle(fontSize: 16.0, color: Colors.white),
 ),
);

final body = Container(
 width: MediaQuery.of(context).size.width,
 padding: EdgeInsets.all(28.0),
 decoration: BoxDecoration(
 gradient: LinearGradient(colors: [
 Colors.blue,
 Colors.lightBlueAccent,
 ]),
 ),
 child: Column(
 children: <Widget>[alucard, welcome, lorem],
 ),
);

代码逻辑也很简单，对于初学者还是挺有用的。

总结

今天就实现这些了，后续继续更新其他的实现方式。学习是一件很累的事情，边学习边整理也是一种提升自己的方式，我的提升需要大家的监督，需要源码的可以关注【
https://gitee.com/android_code/FlutterLogin.git】

谢谢观看技术刚刚好头条文章，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。