本节目标

  • 静态路由
  • 带阴影的椭圆图标
  • 输入有效性校验
  • 组件抽取方法
  • 通用组件、业务组件
  • 程序目录组织
  • 抽取透明导航栏
  • toast 提示组件

1 静态路由

1.1 定义静态路由

  • 登录页 lib/pages/sign_in/sign_in.dart

  • 注册页 lib/pages/sign_up/sign_up.dart

  • 静态路由 lib/routes.dart

1
2
3
4
5
6
7
8
import 'package:flutter_ducafecat_news/pages/sign_in/sign_in.dart';
import 'package:flutter_ducafecat_news/pages/sign_up/sign_up.dart';

/// 静态路由
var staticRoutes = {
"/sign-in": (context) => SignInPage(), // 登录
"/sign-up": (context) => SignUpPage(), // 注册
};

1.2 注册静态路由

  • lib/main.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import 'package:flutter/material.dart';
import 'package:flutter_ducafecat_news/pages/welcome/welcome.dart';
import 'package:flutter_ducafecat_news/routes.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ducafecat.tech',
home: WelcomePage(),
routes: staticRoutes,
debugShowCheckedModeBanner: false,
);
}
}

2 登录界面

2.1 维护色彩常量

  • lib/common/values/colors.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import 'dart:ui';

class AppColors {
/// 主背景 白色
static const Color primaryBackground = Color.fromARGB(255, 255, 255, 255);

/// 主文本 灰色
static const Color primaryText = Color.fromARGB(255, 45, 45, 47);

/// 主控件-背景 蓝色
static const Color primaryElement = Color.fromARGB(255, 41, 103, 255);

/// 主控件-文本 白色
static const Color primaryElementText = Color.fromARGB(255, 255, 255, 255);

// *****************************************

/// 第二种控件-背景色 淡灰色
static const Color secondaryElement = Color.fromARGB(255, 246, 246, 246);

/// 第二种控件-文本 浅蓝色
static const Color secondaryElementText = Color.fromARGB(255, 41, 103, 255);

// *****************************************

/// 第三种控件-背景色 石墨色
static const Color thirdElement = Color.fromARGB(255, 45, 45, 47);
}

2.2 程序结构

  • lib/pages/sign_in/sign_in.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import 'package:flutter/material.dart';
import 'package:flutter_ducafecat_news/common/utils/utils.dart';
import 'package:flutter_ducafecat_news/common/values/values.dart';
import 'package:flutter_ducafecat_news/common/widgets/widgets.dart';

class SignInPage extends StatefulWidget {
SignInPage({Key key}) : super(key: key);

@override
_SignInPageState createState() => _SignInPageState();
}

class _SignInPageState extends State<SignInPage> {

// logo
Widget _buildLogo() {
return Container();
}

// 登录表单
Widget _buildInputForm() {
return Container();
}

// 第三方登录
Widget _buildThirdPartyLogin() {
return Container();
}

// 注册按钮
Widget _buildSignupButton() {
return Container();
}

@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Center(
child: Column(
children: <Widget>[
_buildLogo(),
_buildInputForm(),
Spacer(),
_buildThirdPartyLogin(),
_buildSignupButton(),
],
),
),
);
}
}

2.3 画带阴影的椭圆图标

  • lib/pages/sign_in/sign_in.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// logo
Widget _buildLogo() {
return Container(
width: duSetWidth(110),
margin: EdgeInsets.only(top: duSetHeight(40 + 44.0)), // 顶部系统栏 44px
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: duSetWidth(76),
width: duSetWidth(76),
margin: EdgeInsets.symmetric(horizontal: duSetWidth(15)),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
top: 0,
right: 0,
child: Container(
height: duSetWidth(76),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
boxShadow: [
Shadows.primaryShadow,
],
borderRadius: BorderRadius.all(
Radius.circular(duSetWidth(76 * 0.5))), // 父容器的50%
),
child: Container(),
),
),
Positioned(
top: duSetWidth(13),
child: Image.asset(
"assets/images/logo.png",
fit: BoxFit.none,
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: duSetHeight(15)),
child: Text(
"SECTOR",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w600,
fontSize: duSetFontSize(24),
height: 1,
),
),
),
Text(
"news",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(16),
height: 1,
),
),
],
),
);
}

2.4 抽取输入框

  • lib/common/widgets/input.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/// 输入框
Widget inputTextEdit({
@required TextEditingController controller,
TextInputType keyboardType = TextInputType.text,
String hintText,
bool isPassword = false,
double marginTop = 15,
}) {
return Container(
height: duSetHeight(44),
margin: EdgeInsets.only(top: duSetHeight(marginTop)),
decoration: BoxDecoration(
color: AppColors.secondaryElement,
borderRadius: Radii.k6pxRadius,
),
child: TextField(
controller: controller,
keyboardType: keyboardType,
decoration: InputDecoration(
hintText: hintText,
contentPadding: EdgeInsets.fromLTRB(20, 10, 0, 9),
border: InputBorder.none,
),
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(18),
),
maxLines: 1,
autocorrect: false, // 自动纠正
obscureText: isPassword, // 隐藏输入内容, 密码框
),
);
}

2.5 抽取扁平按钮

  • lib/common/widgets/button.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/// 扁平圆角按钮
Widget btnFlatButtonWidget({
@required VoidCallback onPressed,
double width = 140,
double height = 44,
Color gbColor = AppColors.primaryElement,
String title = "button",
Color fontColor = AppColors.primaryElementText,
double fontSize = 18,
String fontName = "Montserrat",
FontWeight fontWeight = FontWeight.w400,
}) {
return Container(
width: duSetWidth(width),
height: duSetHeight(height),
child: FlatButton(
onPressed: onPressed,
color: gbColor,
shape: RoundedRectangleBorder(
borderRadius: Radii.k6pxRadius,
),
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: fontColor,
fontFamily: fontName,
fontWeight: fontWeight,
fontSize: duSetFontSize(fontSize),
height: 1,
),
),
),
);
}

2.6 抽取社交登录按钮

  • lib/common/widgets/button.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/// 第三方按钮
Widget btnFlatButtonBorderOnlyWidget({
@required VoidCallback onPressed,
double width = 88,
double height = 44,
String iconFileName,
}) {
return Container(
width: duSetWidth(width),
height: duSetHeight(height),
child: FlatButton(
onPressed: onPressed,
shape: RoundedRectangleBorder(
side: Borders.primaryBorder,
borderRadius: Radii.k6pxRadius,
),
child: Image.asset(
"assets/images/icons-$iconFileName.png",
),
),
);
}

2.7 封装 toast 提示框

  • lib/common/widgets/toast.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Future<bool> toastInfo({
@required String msg,
Color backgroundColor = Colors.black,
Color textColor = Colors.white,
}) async {
return await Fluttertoast.showToast(
msg: msg,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.TOP,
timeInSecForIos: 1,
backgroundColor: backgroundColor,
textColor: textColor,
fontSize: duSetFontSize(16),
);
}

2.8 数据有效性检验

  • lib/pages/sign_in/sign_in.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
...
class _SignInPageState extends State<SignInPage> {

//email的控制器
final TextEditingController _emailController = TextEditingController();
//密码的控制器
final TextEditingController _passController = TextEditingController();
...

// 执行登录操作
_handleSignIn() {
if (!duIsEmail(_emailController.value.text)) {
toastInfo(msg: '请正确输入邮件');
return;
}
if (!duCheckStringLength(_passController.value.text, 6)) {
toastInfo(msg: '密码不能小于6位');
return;
}
}

...

// 登录表单
Widget _buildInputForm() {
return Container(
width: duSetWidth(295),
// height: 204,
margin: EdgeInsets.only(top: duSetHeight(49)),
child: Column(
children: [
// email input
inputTextEdit(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
hintText: "Email",
marginTop: 0,
),
// password input
inputTextEdit(
controller: _passController,
keyboardType: TextInputType.visiblePassword,
hintText: "Password",
isPassword: true,
),

// 注册、登录 横向布局
Container(
height: duSetHeight(44),
margin: EdgeInsets.only(top: duSetHeight(15)),
child: Row(
children: [
// 注册
btnFlatButtonWidget(
onPressed: _handleNavSignUp,
gbColor: AppColors.thirdElement,
title: "Sign up",
),
Spacer(),
// 登录
btnFlatButtonWidget(
onPressed: _handleSignIn,
gbColor: AppColors.primaryElement,
title: "Sign in",
),
],
),
),
// Spacer(),

// Fogot password
Container(
height: duSetHeight(22),
margin: EdgeInsets.only(top: duSetHeight(20)),
child: FlatButton(
onPressed: () => {},
child: Text(
"Fogot password?",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.secondaryElementText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(16),
height: 1, // 设置下行高,否则字体下沉
),
),
),
),
],
),
);
}

3 注册界面

3.1 程序结构

  • lib/pages/sign_up/sign_up.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import 'package:flutter/material.dart';
import 'package:flutter_ducafecat_news/common/utils/utils.dart';
import 'package:flutter_ducafecat_news/common/values/values.dart';
import 'package:flutter_ducafecat_news/common/widgets/widgets.dart';

class SignUpPage extends StatefulWidget {
SignUpPage({Key key}) : super(key: key);

@override
_SignUpPageState createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {

// logo
Widget _buildLogo() {
return Container();
}

// 注册表单
Widget _buildInputForm() {
return Container();
}

// 第三方
Widget _buildThirdPartyLogin() {
return Container();
}

// 有账号
Widget _buildHaveAccountButton() {
return Container();
}

@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
...,
body: Center(
child: Column(
children: <Widget>[
Divider(height: 1),
_buildLogo(),
_buildInputForm(),
Spacer(),
_buildThirdPartyLogin(),
_buildHaveAccountButton(),
],
),
),
);
}
}

3.2 透明导航栏

  • lib/common/widgets/app.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/// 透明背景 AppBar
Widget transparentAppBar({
@required BuildContext context,
List<Widget> actions,
}) {
return AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
title: Text(''),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: AppColors.primaryText,
),
onPressed: () {
Navigator.pop(context);
},
),
actions: actions,
);
}
  • lib/pages/sign_up/sign_up.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: transparentAppBar(
context: context,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.info_outline,
color: AppColors.primaryText,
),
onPressed: () {
toastInfo(msg: '这是注册界面');
},
)
],
),

3.2 注册表单

  • lib/pages/sign_up/sign_up.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

// 注册表单
Widget _buildInputForm() {
return Container(
width: duSetWidth(295),
// height: 204,
margin: EdgeInsets.only(top: duSetHeight(49)),
child: Column(
children: [
// fullName input
inputTextEdit(
controller: _fullnameController,
keyboardType: TextInputType.text,
hintText: "Full name",
marginTop: 0,
),
// email input
inputTextEdit(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
hintText: "Email",
),
// password input
inputTextEdit(
controller: _passController,
keyboardType: TextInputType.visiblePassword,
hintText: "Password",
isPassword: true,
),

// 创建
Container(
height: duSetHeight(44),
margin: EdgeInsets.only(top: duSetHeight(15)),
child: btnFlatButtonWidget(
onPressed: () {
if (!duCheckStringLength(_fullnameController.value.text, 5)) {
toastInfo(msg: '用户名不能小于5位');
return;
}
if (!duIsEmail(_emailController.value.text)) {
toastInfo(msg: '请正确输入邮件');
return;
}
if (!duCheckStringLength(_passController.value.text, 6)) {
toastInfo(msg: '密码不能小于6位');
return;
}
Navigator.pop(context);
},
width: 295,
fontWeight: FontWeight.w600,
title: "Create an account",
),
),
// Spacer(),

// Fogot password
Container(
height: duSetHeight(22),
margin: EdgeInsets.only(top: duSetHeight(20)),
child: FlatButton(
onPressed: _handleSignUp,
child: Text(
"Fogot password?",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.secondaryElementText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(16),
height: 1, // 设置下行高,否则字体下沉
),
),
),
),
],
),
);
}

3.3 检验有效性

  • lib/pages/sign_up/sign_up.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 执行注册操作
_handleSignUp() {
if (!duCheckStringLength(_fullnameController.value.text, 5)) {
toastInfo(msg: '用户名不能小于5位');
return;
}
if (!duIsEmail(_emailController.value.text)) {
toastInfo(msg: '请正确输入邮件');
return;
}
if (!duCheckStringLength(_passController.value.text, 6)) {
toastInfo(msg: '密码不能小于6位');
return;
}
Navigator.pop(context);
}

3.4 社交按钮

  • lib/pages/sign_up/sign_up.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 第三方
Widget _buildThirdPartyLogin() {
return Container(
width: duSetWidth(295),
margin: EdgeInsets.only(bottom: duSetHeight(40)),
child: Column(
children: <Widget>[
// title
Text(
"Or sign in with social networks",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(16),
),
),
// 按钮
Padding(
padding: EdgeInsets.only(top: duSetHeight(20)),
child: Row(
children: <Widget>[
btnFlatButtonBorderOnlyWidget(
onPressed: () {},
width: 88,
iconFileName: "twitter",
),
Spacer(),
btnFlatButtonBorderOnlyWidget(
onPressed: () {},
width: 88,
iconFileName: "google",
),
Spacer(),
btnFlatButtonBorderOnlyWidget(
onPressed: () {},
width: 88,
iconFileName: "facebook",
),
],
),
),
],
),
);
}

3.5 返回按钮

  • lib/pages/sign_up/sign_up.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 返回上一页
_handleNavPop() {
Navigator.pop(context);
}

Widget _buildHaveAccountButton() {
return Container(
margin: EdgeInsets.only(bottom: duSetHeight(20)),
child: btnFlatButtonWidget(
onPressed: _handleNavPop,
width: 294,
gbColor: AppColors.secondaryElement,
fontColor: AppColors.primaryText,
title: "I have an account",
fontWeight: FontWeight.w500,
fontSize: 16,
),
);
}

git 代码

https://github.com/ducafecat/flutter_learn_news/releases/tag/v1.0.3

蓝湖设计稿

https://lanhuapp.com/url/wbhGq

参考

视频


© 猫哥

https://ducafecat.tech