登录界面设计
在手机App的开发过程中，基本App都会有登录界面，所以我们今天将使用Flutter来实现登录界面的效果。
首先，我们需要掌握登录界面有那些元素，比如用户名，密码提示以及输入框，其次可能还有上面的logo，下面的登录按钮，以及忘记密码等显示。
前面博主讲解组件的时候，已经讲过，在Flutter开发中，一切皆组件，也就是说，你可以把界面直接赋值给一个变量，比如前面的操作，那么多return代码，可以直接复制给一个变量，这样方便插入操作，那么多嵌套的写着，要是弄丢一个括号，估计找就得找死，所以赋值变量，然后放置在return中，代码看起来就会简洁很多。
login_page.dart登录页面代码
这里我们先写登录页面，login_page.dart代码如下：
import 'package:flutter/material.dart';
import 'home_page.dart';
//登录界面
class LoginPage extends StatefulWidget {
static String tag = 'login-page';
@override
_LoginPageState createState() => new _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
final logo = Hero(//飞行动画
tag: 'hero',
child: CircleAvatar(//圆形图片组件
backgroundColor: Colors.transparent,//透明
radius: 48.0,//半径
child: Image.asset("assets/logo.png"),//图片
),
);
final email = TextFormField(//用户名
keyboardType: TextInputType.emailAddress,
autofocus: false,//是否自动对焦
initialValue: '[email protected]',//默认输入的类容
decoration: InputDecoration(
hintText: '请输入用户名',//提示内容
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),//上下左右边距设置
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)//设置圆角大小
)
),
);
final password = TextFormField(//密码
autofocus: false,
initialValue: 'ssssssssssssssssssssss',
obscureText: true,
decoration: InputDecoration(
hintText: '请输入密码',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
)
),
);
final loginButton = Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),//上下各添加16像素补白
child: Material(
borderRadius: BorderRadius.circular(30.0),// 圆角度
shadowColor: Colors.lightBlueAccent.shade100,//阴影颜色
elevation: 5.0,//浮动的距离
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: (){
Navigator.of(context).pushNamed(HomePage.tag);//点击跳转界面
},
color: Colors.green,//按钮颜色
child: Text('登 录', style: TextStyle(color: Colors.white, fontSize: 20.0),),
),
),
);
final forgotLabel = FlatButton(//扁平化的按钮，前面博主已经讲解过
child: Text('忘记密码?', style: TextStyle(color: Colors.black54, fontSize: 18.0),),
onPressed: () {},
);
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: ListView(//将这些组件全部放置在ListView中
shrinkWrap: true,//内容适配
padding: EdgeInsets.only(left: 24.0, right: 24.0),//左右填充24个像素块
children: <Widget>[
logo,
SizedBox(height: 48.0,),//用来设置两个控件之间的间距
email,
SizedBox(height: 8.0,),
password,
SizedBox(height: 24.0,),
loginButton,
forgotLabel
],
),
),
);
}
}
home_page.dart主页面代码
上面注释已经非常详细了，这里就不在赘述，细心的读者应该看到这段代码中有一个登录按钮，点击之后的跳转界面，也就是大多数App的首页，所以我们还需要写一个跳转之后的界面home_page.dart，代码如下：
import 'package:flutter/material.dart';
//登录后的主界面
class HomePage extends StatelessWidget{
static String tag="home_page";
@override
Widget build(BuildContext context) {
final user=Hero(
tag: "用户名",
child: Padding(
padding: EdgeInsets.all(20.0),//所有方向均填充20像素空白
child: CircleAvatar(
radius: 72.0,
backgroundColor: Colors.transparent,
backgroundImage: AssetImage("assets/timg.jpg"),
),
),
);
final welcome=Padding(//欢迎文字提示
padding: EdgeInsets.all(8.0),
child: Text(
'欢迎你',
style: new TextStyle(color: Colors.white, fontSize: 20.0),
),
);
final info=Padding(//其他文字提示
padding: EdgeInsets.all(8.0),
child: Text(
"登录界面就是这么简单简单哦！",
style: new TextStyle(color: Colors.white, fontSize: 20.0),
),
);
final body=Container(//body主要内容
width: MediaQuery.of(context).size.width,//设置为屏幕宽度
padding: EdgeInsets.all(28.0),//上下左右各填充28空白像素
decoration: BoxDecoration(//装饰器，博主前面的渐变色介绍过
gradient: LinearGradient(//线性渐变
colors: [
Colors.green,//蓝
Colors.lightGreenAccent//绿偏黄的颜色
]
)
),
child: Column(children: <Widget>[//将上面定义的子空间全部添加进去
user, welcome, info,
],),
);
return Scaffold(
body: body,
);
}
}
mian.dart程序入口代码
这上面的注释也是非常的详细，而且线性渐变之前介绍组件的时候有讲解过，应该很好理解，两个界面都写完了，现在重要的就是App程序入口代码需要写，mian.dart代码如下：
import 'package:flutter/material.dart';
import 'package:login_flutter_app/page/home_page.dart';
import 'package:login_flutter_app/page/login_page.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
//routes需要Map<String, WidgetBuilder>类型参数，所以这里定义了一个这个类型的常量，将刚才两个页面添加进去
final routes = <String, WidgetBuilder> {
LoginPage.tag: (context) => LoginPage(),
HomePage.tag: (context) => HomePage(),
};
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '登录Demo',
debugShowCheckedModeBanner: false,
theme: new ThemeData(
primarySwatch: Colors.lightBlue,
),
home: LoginPage(),
routes: routes,
);
}
}
3个注意事项
这段代码有几点需要注意：
第一，我们之前写的所有应用，是不是右上角都有一个debug标签呢？这在实际应用中肯定不会要的，所以这里设置debugShowCheckedModeBanner属性为false，就不会显示debug标签。
第二，前面我们跳转页面用的pop()，然后push()，出栈进栈的方式操作，这里我们定义了一个路由，将使用到的页面全部写在里面，后续需要使用的时候，只要使用如下代码就可以直接跳转：
Navigator.of(context).pushNamed(key);
这就是刚在定义路由routes里面的key值，这种跳转属于静态路由，前面用到的属于动态路由，两种都可以跳转界面，这里提及一样方便大家理解。
第三，home定义App首次进入页面的主页面，其中也可以设置initialRoute属性来达到初始页面的设置，如果没有initialRoute这个属性，那么会去寻找路由表里面的’/’，或者MaterialApp的home属性。但需要特别注意一下，路由表（也就是我们上面代码里面定义的routes变量）里面的’/’（key值） 和MaterialApp的home属性，二者不能同时存在，但是必须有一个存在。
当initialRoute和’/‘或者MaterialApp的home属性同时存在的时候，initialRoute的优先级高于二者。意思就是如果initialRoute定义的页面和’/'或者MaterialApp的home设置的页面不一样，用户看到的是initialRoute定义的页面。
当MaterialApp的home属性定义了主页面，而initialRoute没有定义的时候，用户看到的就是’/'或者MaterialApp的home多对应的页面。
登录界面的代码就讲到这里，显示的效果如博文首图所示。
该博文代码的下载地址：点击下载
