前言:
在原生的andriod 和iOS app里面都会有自动登录的功能 今天我就用flutter 来给大家实现双端的自动登录功能
Android 端用的是 Sharedpreferences 来实现对于轻量级数据的缓存 , IOS端 通常使用NSUserDefaults 来实现轻量级数据的缓存
但是在flutter 有基于Android iOS 做支持的三方插件库 shared_preferences
1准备工作
需要用的三方库
shared_preferences: ^0.5.3+4 (缓存数据)
dio: 2.1.0 （网络请求）
toast: ^0.1.5 （吐司文字类比 Android里面的toast）
在项目里面的pubspec.yaml 添加依赖 然后在项目根目录打开控制台输入 flutter pub get 命令回去下载相对应的依赖
2具体实现
先实现登录界面的功能
登录页面是两个输入框TextFiled 和一个RaisedButton 来实现请求后台来处理登录功能
通过Dio库来实现异步网络请求 然后 通过 factory BackBean.fromJson 来转换成对象
在登录成功后通过 SharedPreferences 来储存数据 如下图所示 在登录成功后调用sharedPreferences.setString ()方法来存数据
下面是登录页面的具体实现
```
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:dio/dio.dart';
import 'tabs/Api.dart';
import 'entity/BackBean.dart';
import 'utils/ToastUtil.dart';
import 'Register.dart';
import 'My.dart';
/**
* 创建人:xuqing
* 创建时间:2019年12月22日19:28:56
* 类说明： 登录页面 业务需求通过 dio 网络请求库 和 shared_preferences 数据缓存库 来实现自动登录功能*
*/
class Loginextends StatefulWidget {
Login({Key key}) :super(key: key);
@override
_LoginStatecreateState() {
return _LoginState();
}
}
class _LoginStateextends State {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widgetbuild(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar:AppBar(
title:Text("登录"), ),
body:Layout(),
);
}
}
class Layoutextends StatefulWidget {
Layout({Key key}) :super(key: key);
@override
_LayoutStatecreateState() {
return _LayoutState();
}
}
class _LayoutStateextends State {
var _username="";
var _password="";
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widgetbuild(BuildContext context) {
// TODO: implement build
return Column(
children: [
TextField(
obscureText:false,
decoration:InputDecoration(
hintText:"请输入账号",
),
onChanged: (value){
setState(() {
this._username=value;
});
},
),
SizedBox(height:20,),
TextField(
obscureText:true,
decoration:InputDecoration(
hintText:"请输入密码",
),
onChanged: (value){
setState(() {
this._password=value;
});
},
),
Container(
width:300,
child:RaisedButton(
child:Text("登录"),
color: Colors.blue,
onPressed: ()async{
Dio dio =new Dio();
Response res=await dio.get(Api.LOGIN_URL,
queryParameters: {"username":_username,
"password":_password});
BackBean _backbean=BackBean.fromJson(res.data);
String getmsg=_backbean.msg;
int getcode=_backbean.code;
print(getmsg);
print(getcode);
if(getcode==200){
// print("登录成功");
SharedPreferences sharedPreferences =await SharedPreferences.getInstance();
sharedPreferences.setString('username', _username);
sharedPreferences.setString('password', _password);
ToastUtil.showinfo(context, getmsg);
Navigator.of(context).push(
new MaterialPageRoute(builder: (context) {
//指定跳转的页面
return new My();
},)
);
}else{
ToastUtil.showinfo(context, getmsg);
}
print(res.data.toString());
},
),
),
RaisedButton(
child:Text("注册账号"),
color: Colors.red,
textColor: Colors.white,
onPressed: (){
Navigator.of(context).push(
new MaterialPageRoute(builder: (context) {
//指定跳转的页面
return new Register();
},)
) }, )],
); }
}
```
### 欢迎页（闪屏页面）的具体实现
在initState 初始化生命周期方法里面 我们做一个3秒钟的倒计时 3秒钟 后我们调用toLogin方法 在login方法里面 我们 做了处理 调用
sharedPreferences.getString('password');来读取缓存的里面的数据 做空判 如果没有缓存数据我们就去登陆页面 如果有数据我们之间调用
登陆接口 进行自动登录操作 登录完成后我们直接跳转到主页 欢迎页的具体代码实现 如下
具体代码 (欢迎页面)
```
import 'package:flutter/material.dart';
import 'Login.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:dio/dio.dart';
import 'utils/StingUtil.dart';
import 'tabs/Api.dart';
import 'entity/BackBean.dart';
import 'utils/ToastUtil.dart';
import 'dart:async';
import 'My.dart';
void main() => runApp(MyApp());
class MyAppextends StatelessWidget {
// This widget is the root of your application.
@override
Widgetbuild(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title:Text("欢迎页"), ),
body:MyHomePage(), )
);
}
}
/**
*
* 欢迎页面*
*/
class MyHomePageextends StatefulWidget {
MyHomePage({Key key}) :super(key: key);
@override
_MyHomePageStatecreateState() {
return _MyHomePageState();
}
}
class _MyHomePageStateextends State {
var _getaname="";
var _getpsw="";
@override
void initState() {
super.initState();
int count =0;
const period =const Duration(seconds:1);
print('currentTime='+DateTime.now().toString());
Timer.periodic(period, (timer) {
//到时回调
print('afterTimer='+DateTime.now().toString());
count++;
if (count >=3) {
//取消定时器，避免无限回调
timer.cancel();
timer =null;
toLoing();
}
});
}
@override
void dispose() {
super.dispose();
}
void toLoing()async{
SharedPreferences sharedPreferences =await SharedPreferences.getInstance();
_getaname = sharedPreferences.getString('username');
_getpsw = sharedPreferences.getString('password');
if(!StringUtil.isEmpty(_getaname)&&!StringUtil.isEmpty(_getpsw)){
Dio dio =new Dio();
Response res=await dio.get(Api.LOGIN_URL, queryParameters: {"username":_getaname, "password":_getpsw});
BackBean _backbean=BackBean.fromJson(res.data);
String getmsg=_backbean.msg;
int getcode=_backbean.code;
if(getcode==200){
ToastUtil.showinfo(context, getmsg);
Navigator.of(context).push(
new MaterialPageRoute(builder: (context) {
return new My();
},)
);
}
}else{
Navigator.of(context).push(
new MaterialPageRoute(builder: (context) {
return new Login ();
},) );
}
}
@override
Widgetbuild(BuildContext context) {
// TODO: implement build
return Container(
child:Image.network("http://pic1.win4000.com/mobile/2019-05-31/5cf0dd648a143.jpg"),
);
}
}
```
其他你自己要跳转的主页 可以自己去拓展 这个demo的请求接口是自己用spring boot 实现的 最后也会附上代码链接地址
## 技术要点:
代码相对简单，思路也不复杂 会原生开发的同学应该很难容易看懂 基本跟Android 的Sharedpreferences 用法类似 但是flutter 在使用Shared_Preferences 插件库的时候 因为用了 await 关键字 所有必须是在异步的方法 （async ）里面进行实现 存储和获取数据 ，其次就是json 解析也相对简单 在拿到res.data 直接通过 BackBean _backbean=BackBean.fromJson(res.data);来转成对象操作 我们只需要创建如图的bean类来 转换就行了
## 最后总结 ：
我也是个初学 flutter 的新手 希望我平时写的一些基础功能能够帮助到大家，有兴趣的同学可以私下研究下。这里就不过多讲了 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。有兴趣的同学麻烦给关注和star
网友评论