Flutter 实现自动登录

其他 2020-08-03 13:49:49 阅读次数: 0

前言:

在原生的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）
image
在项目里面的pubspec.yaml 添加依赖 然后在项目根目录打开控制台输入 flutter pub get 命令回去下载相对应的依赖

2具体实现

先实现登录界面的功能
image
登录页面是两个输入框TextFiled 和一个RaisedButton 来实现请求后台来处理登录功能
通过Dio库来实现异步网络请求 然后 通过 factory BackBean.fromJson 来转换成对象
在登录成功后通过 SharedPreferences 来储存数据 如下图所示 在登录成功后调用sharedPreferences.setString ()方法来存数据
image

下面是登录页面的具体实现

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();
                },)
       ) }, )],
    );  }
}

欢迎页（闪屏页面）的具体实现

image
image
在initState 初始化生命周期方法里面 我们做一个3秒钟的倒计时 3秒钟 后我们调用toLogin方法 在login方法里面 我们 做了处理 调用
sharedPreferences.getString(‘password’);来读取缓存的里面的数据 做空判 如果没有缓存数据我们就去登陆页面 如果有数据我们之间调用
登陆接口 进行自动登录操作 登录完成后我们直接跳转到主页 欢迎页的具体代码实现 如下

image
具体代码 (欢迎页面)

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类来 转换就行了
image

最后总结 ：

我也是个初学 flutter 的新手 希望我平时写的一些基础功能能够帮助到大家，有兴趣的同学可以私下研究下。这里就不过多讲了 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。有兴趣的同学麻烦给关注和star 也可以加我个人QQ/微信（1693891473）

QQ 交流群：

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/xq610928/article/details/107045646
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022