Flutter实现注册登录功能
一、判断当前用户是否已经登录,如果登录,则直接进入首页;如果没有登录,则直接进入登录页;
关键点在于:不要在首页已经出现以后,在判断数据,然后显示登录页;
伪代码:
class _StartAppState extends State<MyHome>{
var loginState;
@override
void initState(){
super.initState();
_validateLogin();
}
@override
Widget build(BuildContext context){
if(loginState == 0){
return login();
}else{
return home();
}
}
Future _validateLogin() async{
Future<dynamic> future = Future(()async{
SharedPreferences prefs = await SharedPreferences.getInstance();
String loginToken = prefs.get("loginToken");
return loginToken;
});
future.then((val){
if(val == null){
setState(() {
loginState = 0;
});
}else{
setState(() {
loginState = 1;
});
}
}).catchError((_){
print("catchError");
});
}
}
分析:在页面初始化(initState)的时候,读取本地存储的用户信息;在build显示页面的时候,判断显示提前注册的路由;
二、登录/注册页面
class login extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return page();
}
}
class page extends State<StatefulWidget> {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_buildTopBannerWidget(),
_loginButton(),
_registerButton(),
],
),
);
}
// 顶部图片
_buildTopBannerWidget() {
return Container(
width: MediaQuery.of(context).size.width,
height: 300,
child: Image.asset(
"images/123.png",
fit: BoxFit.cover,
),
);
}
// 登录Button
_loginButton() {
return Padding(
padding: const EdgeInsets.only(top: 30, left: 40, right: 40),
child: FlatButton(
color: Colors.blue,
highlightColor: Colors.blue,
textColor: Colors.white,
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () {
Navigator.of(context).pushNamed("startLogin");
},
child: Container(
height: 44,
width: MediaQuery.of(context).size.width,
alignment: Alignment.center,
child: Text("登录",
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w300),
),
),
),
);
}
// 注册Button
_registerButton() {
return Padding(
padding: const EdgeInsets.only(top: 30, left: 40, right: 40),
child: FlatButton(
color: Color(0xFFcccccc),
highlightColor: Color(0xFFcccccc),
textColor: Colors.blue,
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () {
Navigator.of(context).pushNamed("register");
},
child: Container(
height: 44,
width: MediaQuery.of(context).size.width,
alignment: Alignment.center,
child: Text("手机号注册",
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w300),
),
),
),
);
}
}
三、首页的实现;
class home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return page();
}
}
class page extends State<StatefulWidget> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: Text("首页"),),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('公园')),
BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('电台')),
BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('消息')),
BottomNavigationBarItem(icon: Icon(Icons.cloud), title: Text('我的')),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
showUnselectedLabels: true,
unselectedItemColor: Colors.black54,
onTap: _onItemTapped,
),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。