用 Flutter 写一个精美的登录页面（最新版）

用 Flutter 写一个精美的登录页面（最新版）

• 
  
  
  
  • 主体结构
    
  • 标题
    
  • 输入框
    
  • 登录按钮
    
  • 其他登录方式
    
  • 注册按钮
    
  • 完整源码
    
  
  

   参考了博客：用flutter写一个精美的登录页面。但是那篇文章是 18 年的，较多 API 已经更新，本篇博文在其基础上使用最新版本 Dart 和 Flutter 开发。
  完整源码在文章最后，有需要可以直接看源码。
效果图：


主体结构

该页面的主体布局如下：

• 整体基于一个 Scaffold，没有 AppBar
  
• 由于要对输入框进行表单校验，使用了 Form
  
• 使用 ListView 作为外层控件
  

1. return Scaffold(
2.   body: Form(
3.     key: _formKey,
4.     autovalidateMode: AutovalidateMode.onUserInteraction,
5.     child: ListView(
6.       padding: const EdgeInsets.symmetric(horizontal: 20),
7.       children: [
8.         const SizedBox(height: kToolbarHeight), // 距离顶部一个工具栏的高度
9.         buildTitle(), // Login
10.         buildTitleLine(), // 标题下面的下滑线
11.         const SizedBox(height: 50),
12.         buildEmailTextField(), // 输入邮箱
13.         const SizedBox(height: 30),
14.         buildPasswordTextField(context), // 输入密码
15.         buildForgetPasswordText(context), // 忘记密码
16.         const SizedBox(height: 50),
17.         buildLoginButton(context), // 登录按钮
18.         const SizedBox(height: 30),
19.         buildOtherLoginText(), // 其他账号登录
20.         buildOtherMethod(context), // 其他登录方式
21.         buildRegisterText(context), // 注册
22.       ],
23.     ),
24.   ),
25. );

复制代码

标题


大标题 Titile 比较简单，就是设置了 边距 和 文字大小：

• Padding 组件：设置边距
  
• Text 组件：显示文本及控制样式
  

1. Widget buildTitle() {
2.   return const Padding( // 设置边距
3.       padding: EdgeInsets.all(8),
4.       child: Text(
5.         'Login',
6.         style: TextStyle(fontSize: 42),
7.       ));
8. }

复制代码

Title 下面的下划线其实就是个设置了宽高的 Container：

• Align 组件：用于控制子组件的对齐方式
  
• Container 组件：一个包含绘画、定位、大小的组件
  

1. Widget buildTitleLine() {
2.   return Padding(
3.       padding: const EdgeInsets.only(left: 12.0, top: 4.0),
4.       child: Align(
5.         alignment: Alignment.bottomLeft,
6.         child: Container(
7.           color: Colors.black,
8.           width: 40,
9.           height: 2,
10.         ),
11.       ));
12. }

复制代码

输入框


邮箱输入框：使用正则对输入进行校验

• TextFormField 组件：用于 Form 中的文本输入框
  
• validator 属性用于对输入框进行表单校验
  
• onSave 属性当表单校验通过后执行一些操作
  

   何时进行表单校验是 From 组件中的一个属性

1. Widget buildEmailTextField() {
2.   return TextFormField(
3.     decoration: const InputDecoration(labelText: 'Email Address'),
4.     validator: (v) {
5.       var emailReg = RegExp(
6.           r"[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?");
7.       if (!emailReg.hasMatch(v!)) {
8.         return '请输入正确的邮箱地址';
9.       }
10.     },
11.     onSaved: (v) => _email = v!,
12.   );
13. }

复制代码

密码输入框：

• obscureText 属性控制表单文字的显示与隐藏，我们使用自定义变量来实现点击按钮隐藏或显示密码功能
  
• suffixIcon 属性是在输入框后面加一个图标，给它一个点击方法是改变是否显示密码，并更改图标的颜色
  
• setState 用于通知 Flutter 框架重绘界面，此处我们利用变量 _isObscure 控制输入框密码的可见性，涉及到界面显示的更新，因此要更新 _isObscure 的代码放在 setState 中。
  

1. Widget buildPasswordTextField(BuildContext context) {
2.   return TextFormField(
3.       obscureText: _isObscure, // 是否显示文字
4.       onSaved: (v) => _password = v!,
5.       validator: (v) {
6.         if (v!.isEmpty) {
7.           return '请输入密码';
8.         }
9.       },
10.       decoration: InputDecoration(
11.           labelText: "Password",
12.           suffixIcon: IconButton(
13.             icon: Icon(
14.               Icons.remove_red_eye,
15.               color: _eyeColor,
16.             ),
17.             onPressed: () {
18.               // 修改 state 内部变量, 且需要界面内容更新, 需要使用 setState()
19.               setState(() {
20.                 _isObscure = !_isObscure;
21.                 _eyeColor = (_isObscure
22.                     ? Colors.grey
23.                     : Theme.of(context).iconTheme.color)!;
24.               });
25.             },
26.           )));
27. }

复制代码

密码输入框下面还有一行 “忘记密码？” 的文本，利用 Align 组件将其靠右对齐

1. Widget buildForgetPasswordText(BuildContext context) {
2.   return Padding(
3.     padding: const EdgeInsets.only(top: 8),
4.     child: Align(
5.       alignment: Alignment.centerRight,
6.       child: TextButton(
7.         onPressed: () {
8.           // Navigator.pop(context);
9.           print("忘记密码");
10.         },
11.         child: const Text("忘记密码？",
12.             style: TextStyle(fontSize: 14, color: Colors.grey)),
13.       ),
14.     ),
15.   );
16. }

复制代码

登录按钮


登录按钮：

• ElevatedButton 组件是一个常见的，点击后有波纹效果的按钮
  
• 点击登录按钮后，进行表单校验
  

1. Widget buildLoginButton(BuildContext context) {
2.   return Align(
3.     child: SizedBox(
4.       height: 45,
5.       width: 270,
6.       child: ElevatedButton(
7.         style: ButtonStyle(
8.             // 设置圆角
9.             shape: MaterialStateProperty.all(const StadiumBorder(
10.                 side: BorderSide(style: BorderStyle.none)))),
11.         child: Text('Login',
12.             style: Theme.of(context).primaryTextTheme.headline5),
13.         onPressed: () {
14.           // 表单校验通过才会继续执行
15.           if ((_formKey.currentState as FormState).validate()) {
16.             (_formKey.currentState as FormState).save();
17.             //TODO 执行登录方法
18.             print('email: $_email, password: $_password');
19.           }
20.         },
21.       ),
22.     ),
23.   );
24. }

复制代码

其他登录方式


其他登录方式：

• ButtonBar 组件用于构建多个按钮的排列（方向可控）
  
• map 是个高阶函数，可以对 数组的每个元素进行某种操作，最后再归约成数组
  
• SnackBar 是一种从底部出现的轻量级弹窗
  

1. final List _loginMethod = [
2.   {
3.     "title": "facebook",
4.     "icon": Icons.facebook,
5.   },
6.   {
7.     "title": "google",
8.     "icon": Icons.fiber_dvr,
9.   },
10.   {
11.     "title": "twitter",
12.     "icon": Icons.account_balance,
13.   },
14. ];
16. Widget buildOtherMethod(context) {
17.   return ButtonBar(
18.     alignment: MainAxisAlignment.center,
19.     children: _loginMethod
20.         .map((item) => Builder(builder: (context) {
21.               return IconButton(
22.                   icon: Icon(item['icon'],
23.                       color: Theme.of(context).iconTheme.color),
24.                   onPressed: () {
25.                     //TODO: 第三方登录方法
26.                     ScaffoldMessenger.of(context).showSnackBar(
27.                       SnackBar(
28.                           content: Text('${item['title']}登录'),
29.                           action: SnackBarAction(
30.                             label: '取消',
31.                             onPressed: () {},
32.                           )),
33.                     );
34.                   });
35.             }))
36.         .toList(),
37.   );
38. }

复制代码

注册按钮

注册按钮：

• GestureDetector 是手势检测器，用它包裹组件后可以实现对该组件的各种手势的监听，例如：“单击”、“双击”、“长按” 等。
  

1. Widget buildRegisterText(context) {
2.   return Center(
3.     child: Padding(
4.       padding: const EdgeInsets.only(top: 10),
5.       child: Row(
6.         mainAxisAlignment: MainAxisAlignment.center,
7.         children: [
8.           const Text('没有账号?'),
9.           GestureDetector(
10.             child: const Text('点击注册', style: TextStyle(color: Colors.green)),
11.             onTap: () {
12.               print("点击注册");
13.             },
14.           )
15.         ],
16.       ),
17.     ),
18.   );
19. }

复制代码

完整源码

新建一个 Flutter 项目，替换其中 main.dart 的内容，即可运行起来。

1. import 'package:flutter/material.dart';
3. void main() => runApp(const MyApp());
5. class MyApp extends StatelessWidget {
6.   const MyApp({Key? key}) : super(key: key);
8.   @override
9.   Widget build(BuildContext context) {
10.     return MaterialApp(
11.         debugShowCheckedModeBanner: false, // 不显示右上角的 debug
12.         title: 'Flutter Demo',
13.         theme: ThemeData(
14.           primarySwatch: Colors.blue,
15.         ),
16.         // 注册路由表
17.         routes: {
18.           "/": (context) => const HomePage(title: "登录"), // 首页路由
19.         });
20.   }
21. }
23. class HomePage extends StatefulWidget {
24.   const HomePage({Key? key, required this.title}) : super(key: key);
25.   final String title;
27.   @override
28.   _HomePageState createState() => _HomePageState();
29. }
31. class _HomePageState extends State<HomePage> {
32.   final GlobalKey _formKey = GlobalKey<FormState>();
33.   late String _email, _password;
34.   bool _isObscure = true;
35.   Color _eyeColor = Colors.grey;
36.   final List _loginMethod = [
37.     {
38.       "title": "facebook",
39.       "icon": Icons.facebook,
40.     },
41.     {
42.       "title": "google",
43.       "icon": Icons.fiber_dvr,
44.     },
45.     {
46.       "title": "twitter",
47.       "icon": Icons.account_balance,
48.     },
49.   ];
51.   @override
52.   Widget build(BuildContext context) {
53.     return Scaffold(
54.       body: Form(
55.         key: _formKey, // 设置globalKey，用于后面获取FormStat
56.         autovalidateMode: AutovalidateMode.onUserInteraction,
57.         child: ListView(
58.           padding: const EdgeInsets.symmetric(horizontal: 20),
59.           children: [
60.             const SizedBox(height: kToolbarHeight), // 距离顶部一个工具栏的高度
61.             buildTitle(), // Login
62.             buildTitleLine(), // Login下面的下划线
63.             const SizedBox(height: 60),
64.             buildEmailTextField(), // 输入邮箱
65.             const SizedBox(height: 30),
66.             buildPasswordTextField(context), // 输入密码
67.             buildForgetPasswordText(context), // 忘记密码
68.             const SizedBox(height: 60),
69.             buildLoginButton(context), // 登录按钮
70.             const SizedBox(height: 40),
71.             buildOtherLoginText(), // 其他账号登录
72.             buildOtherMethod(context), // 其他登录方式
73.             buildRegisterText(context), // 注册
74.           ],
75.         ),
76.       ),
77.     );
78.   }
80.   Widget buildRegisterText(context) {
81.     return Center(
82.       child: Padding(
83.         padding: const EdgeInsets.only(top: 10),
84.         child: Row(
85.           mainAxisAlignment: MainAxisAlignment.center,
86.           children: [
87.             const Text('没有账号?'),
88.             GestureDetector(
89.               child: const Text('点击注册', style: TextStyle(color: Colors.green)),
90.               onTap: () {
91.                 print("点击注册");
92.               },
93.             )
94.           ],
95.         ),
96.       ),
97.     );
98.   }
100.   Widget buildOtherMethod(context) {
101.     return ButtonBar(
102.       alignment: MainAxisAlignment.center,
103.       children: _loginMethod
104.           .map((item) => Builder(builder: (context) {
105.                 return IconButton(
106.                     icon: Icon(item['icon'],
107.                         color: Theme.of(context).iconTheme.color),
108.                     onPressed: () {
109.                       //TODO: 第三方登录方法
110.                       ScaffoldMessenger.of(context).showSnackBar(
111.                         SnackBar(
112.                             content: Text('${item['title']}登录'),
113.                             action: SnackBarAction(
114.                               label: '取消',
115.                               onPressed: () {},
116.                             )),
117.                       );
118.                     });
119.               }))
120.           .toList(),
121.     );
122.   }
124.   Widget buildOtherLoginText() {
125.     return const Center(
126.       child: Text(
127.         '其他账号登录',
128.         style: TextStyle(color: Colors.grey, fontSize: 14),
129.       ),
130.     );
131.   }
133.   Widget buildLoginButton(BuildContext context) {
134.     return Align(
135.       child: SizedBox(
136.         height: 45,
137.         width: 270,
138.         child: ElevatedButton(
139.           style: ButtonStyle(
140.               // 设置圆角
141.               shape: MaterialStateProperty.all(const StadiumBorder(
142.                   side: BorderSide(style: BorderStyle.none)))),
143.           child: Text('Login',
144.               style: Theme.of(context).primaryTextTheme.headline5),
145.           onPressed: () {
146.             // 表单校验通过才会继续执行
147.             if ((_formKey.currentState as FormState).validate()) {
148.               (_formKey.currentState as FormState).save();
149.               //TODO 执行登录方法
150.               print('email: $_email, password: $_password');
151.             }
152.           },
153.         ),
154.       ),
155.     );
156.   }
158.   Widget buildForgetPasswordText(BuildContext context) {
159.     return Padding(
160.       padding: const EdgeInsets.only(top: 8),
161.       child: Align(
162.         alignment: Alignment.centerRight,
163.         child: TextButton(
164.           onPressed: () {
165.             // Navigator.pop(context);
166.             print("忘记密码");
167.           },
168.           child: const Text("忘记密码？",
169.               style: TextStyle(fontSize: 14, color: Colors.grey)),
170.         ),
171.       ),
172.     );
173.   }
175.   Widget buildPasswordTextField(BuildContext context) {
176.     return TextFormField(
177.         obscureText: _isObscure, // 是否显示文字
178.         onSaved: (v) => _password = v!,
179.         validator: (v) {
180.           if (v!.isEmpty) {
181.             return '请输入密码';
182.           }
183.         },
184.         decoration: InputDecoration(
185.             labelText: "Password",
186.             suffixIcon: IconButton(
187.               icon: Icon(
188.                 Icons.remove_red_eye,
189.                 color: _eyeColor,
190.               ),
191.               onPressed: () {
192.                 // 修改 state 内部变量, 且需要界面内容更新, 需要使用 setState()
193.                 setState(() {
194.                   _isObscure = !_isObscure;
195.                   _eyeColor = (_isObscure
196.                       ? Colors.grey
197.                       : Theme.of(context).iconTheme.color)!;
198.                 });
199.               },
200.             )));
201.   }
203.   Widget buildEmailTextField() {
204.     return TextFormField(
205.       decoration: const InputDecoration(labelText: 'Email Address'),
206.       validator: (v) {
207.         var emailReg = RegExp(
208.             r"[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?");
209.         if (!emailReg.hasMatch(v!)) {
210.           return '请输入正确的邮箱地址';
211.         }
212.       },
213.       onSaved: (v) => _email = v!,
214.     );
215.   }
217.   Widget buildTitleLine() {
218.     return Padding(
219.         padding: const EdgeInsets.only(left: 12.0, top: 4.0),
220.         child: Align(
221.           alignment: Alignment.bottomLeft,
222.           child: Container(
223.             color: Colors.black,
224.             width: 40,
225.             height: 2,
226.           ),
227.         ));
228.   }
230.   Widget buildTitle() {
231.     return const Padding(
232.         padding: EdgeInsets.all(8),
233.         child: Text(
234.           'Login',
235.           style: TextStyle(fontSize: 42),
236.         ));
237.   }
238. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！