flutter基于provider状态管理设置主题颜色 实现简单登录 注册功能---页面+逻辑

一、provider状态管理设置主题颜色

第一步：

安装依赖库

provider: ^4.3.2+3

第二步:

创建共享数据模型

import 'package:flutter/material.dart';import 'package:privider_test/base/baseThemes.dart';class ThemesViewmodel extends ChangeNotifier {int _index = 0;int get getColor {return _index;}void SetColor(int value) {if (value > themes.length - 1) return;_index = value;notifyListeners();}}

在main函数中引入共享模型

第三步:

创建base颜色数组

import 'package:flutter/material.dart';List themes = [Colors.green,Colors.yellow,Colors.purple,Colors.orange,Colors.cyan,Colors.blue,];

在主题中使用provider状态管理，由于想让颜色的值发生改变这里我们使用statefulWidget

mian.dart

import 'package:flutter/material.dart';import 'package:privider_test/page/UserLoginpage.dart';import 'package:provider/provider.dart';import 'ViewModel/ThemesViewmodel.dart';import 'base/baseThemes.dart';void main() {runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (context) => ThemesViewmodel(),)],child: MyApp(),));}class MyApp extends StatefulWidget {const MyApp({Key key}) : super(key: key);@override_MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,home: UserLoginpage(),theme: ThemeData(primarySwatch:themes[Provider.of<ThemesViewmodel>(context).getColor]), //变换主题颜色);}}

第四步:

画出ui，并添加点击事件

import 'package:flutter/material.dart';import 'package:privider_test/ViewModel/ThemesViewmodel.dart';import 'package:privider_test/base/baseThemes.dart';import 'package:provider/provider.dart';class UserLoginpage extends StatefulWidget {const UserLoginpage({Key key }) : super(key: key);@override_UserLoginpageState createState() => _UserLoginpageState();}class _UserLoginpageState extends State<UserLoginpage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("登录界面"),),body: Padding(padding: EdgeInsets.all(10),child: Container(child: ListView.builder(shrinkWrap: true,itemCount: themes.length,itemBuilder: _itemBuilder,//如果加()就是执行这个方法,不加就是将这个返回), ),));}Widget _itemBuilder(BuildContext context,int index){return GestureDetector(onTap: ()async{(context).read<ThemesViewmodel>().SetColor(index);},child: Container(margin: EdgeInsets.symmetric(vertical: 8),height: 50,width: double.infinity,decoration: BoxDecoration(borderRadius: BorderRadius.circular(8),color: themes[index]),),);}}

二、flutter登录功能的实现

第一步：创建目录文件夹

第二步：

配置yaml文件依赖

provider: ^4.3.2+3dio: ^4.0.0tdui: 0.0.3encrypt: ^5.0.1# 提示框flutter_easyloading: ^3.0.0

编写global.dart

import 'package:dio/dio.dart';import 'package:flutter_easyloading/flutter_easyloading.dart';class Global {static Global _instance;Dio dio;String token;Map user;static Global getInstance() {if (_instance == null) _instance = new Global();return _instance;}Global() {dio = new Dio();dio.options = BaseOptions(baseUrl: "/",// baseUrl: "http://localhost:8080/",connectTimeout: 5000,sendTimeout: 5000,receiveTimeout: 5000,contentType: Headers.formUrlEncodedContentType,responseType: ResponseType.json,);dio.interceptors.add(InterceptorsWrapper(onRequest: (options, handler) {EasyLoading.show(status: "Loading...");return handler.next(options); //continue},onResponse: (response, handler) {EasyLoading.dismiss();return handler.next(response); // continue},onError: (DioError e, handler) {print(e.toString());EasyLoading.dismiss();String msg = "";if (e.type == DioErrorType.connectTimeout) {msg = "连接超时错误";} else {msg = "接口错误！";}EasyLoading.showError(msg);},));}}

main.dart

import 'package:flutter/material.dart';import 'package:myitem/router/route_handler.dart';import 'package:myitem/view/UserLogin.dart';import 'package:myitem/viewmodel/login_viewmodel.dart';import 'package:provider/provider.dart';void main() {runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (context) => LoginViewmodel(),)],child: const MyApp(),),);}class MyApp extends StatelessWidget {const MyApp({Key key}) : super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: const UserLogin(),onGenerateRoute: AppRouteManager.getInstance().onGenerateRoute,debugShowCheckedModeBanner: false, //去掉默认标签);}}

loginmodel.dart

//登录数据模型import 'package:myitem/global/Global.dart';import 'package:myitem/util/rsa_utils.dart';Future loginModel(String user, String pass) async {//将登录的账号和密码传入String pwd = await encodeString(pass);//使用rsa进行加密return await Global.getInstance().dio.post("/zxw/user",queryParameters: {"username":user,"password":pwd});//调用实例对象后的dio接口dio接口采用接口文档中对应的接口方式get/post提交数据，文档中//有固定传入参数两个主键请求的结果异步返回给viewmodel}

/* view层调用viewmodel，viewmodel通知model层，model再发送请求返回给viewmodel，viewmodel处理返回结果并刷新view*/

登录界面

import 'dart:async';import 'package:flutter/material.dart';import 'package:myitem/base/view.dart';import 'package:myitem/util/rsa_utils.dart';import 'package:myitem/viewmodel/login_viewmodel.dart';import 'package:tdui/tdui.dart';import 'package:provider/provider.dart';class UserLogin extends StatefulWidget {const UserLogin({Key key}) : super(key: key);@override_UserLoginState createState() => _UserLoginState();}class _UserLoginState extends State<UserLogin> {@overridevoid initState() {super.initState();}// void loadData()async{// var result = await encodeString("1");// print(result);// }@overridevoid dispose() {super.dispose();//节省资源context.read<LoginViewmodel>().getPwd.dispose();context.read<LoginViewmodel>().getUser.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: getAppBar("登录"),body: Padding(padding: EdgeInsets.all(20),child: Column(children: [// Image.asset(// "images/login.jpg",// width: double.infinity,// fit: BoxFit.fill,// ),SizedBox(height: 16,),TextField(decoration: InputDecoration(labelText: "账号",hintText: "请输入账号",prefix: Icon(Icons.person),),autofocus: true,textInputAction: TextInputAction.next,controller: Provider.of<LoginViewmodel>(context).getUser,),TextField(controller: Provider.of<LoginViewmodel>(context).getPwd,decoration: InputDecoration(labelText: "密码", hintText: "请输入密码", prefix: Icon(Icons.lock)),obscureText: true,textInputAction: TextInputAction.send,),SizedBox(height: 16,),GestureDetector(child: Container(width: double.infinity,child: Text("找回密码",style: TextStyle(color: Colors.blue),textAlign: TextAlign.right,),),onTap: () {print("找回密码");},),SizedBox(height: 16,),TdButton('登录',theme: TdButtonType.primary,loading: Provider.of<LoginViewmodel>(context).getIsLogin,onClick: () {_login();// loadData();},),SizedBox(height: 16,),TdButton('注册',theme: TdButtonType.primary,onClick: () {_register();},)],),),);}void _login() {// context.read<LoginViewmodel>().setIsLogin(true);// new Timer(Duration(seconds: 3), () {// context.read<LoginViewmodel>().setIsLogin(false);// Navigator.of(context).pushNamed("/MenuPage");// });context.read<LoginViewmodel>().login(context);}void _register() {// context.read<LoginViewmodel>().setIsLogin(false);Navigator.of(context).pushNamed("/RegisterPage");}}/* view层调用viewmodel，viewmodel通知model层，model再发送请求返回给viewmodel，viewmodel处理返回结果并刷新view*/

login_viewmodel

import 'package:dio/dio.dart';import 'package:flutter/cupertino.dart';import 'package:myitem/model/login_model.dart';import 'package:tdui/tdui.dart';//创建登录状态管理class LoginViewmodel extends ChangeNotifier {bool _isLogin = false;TextEditingController _userName; //创建controller进行全局状态管理TextEditingController _password;bool get getIsLogin {//返回return _isLogin;}TextEditingController get getUser {_userName ??= TextEditingController();//返回return _userName;}TextEditingController get getPwd {_password ??= TextEditingController(); //如果没有创建那么进行实例化//返回return _password;}// ignore: avoid_return_types_on_settersvoid setIsLogin(bool value) {_isLogin = value;notifyListeners();}void login(BuildContext context) async {setIsLogin(true); //先设置为trueif (getUser.text.isEmpty) {//判断账号是否为空TdToast.fail(context)(message: "账号不能为空");setIsLogin(false); //如果为空那么就返回falsereturn;} else if (getPwd.text.isEmpty) {//如果密码为空，那么返回falseTdToast.fail(context)(message: "密码不能为空");setIsLogin(false);return;}//如果账号密码都不是空那么,用response接收账号和密码从viewmodel传值到数据模型Response result = await loginModel(getUser.text, getPwd.text);if (result.data["success"]) {Navigator.of(context).popAndPushNamed("/MenuPage");} else {TdDialog.alert(context)(result.data["msg"],theme: TdDialogTheme.android);}setIsLogin(false);}}

theme: ThemeData(primarySwatch: Colors.yellow),//变换主题颜色

实现开关功能

TdCell(label: "出生日期",align: Alignment.center,content: Provider.of<RegisterViewModel>(context).getDateTime,footer: Row(children: [TdSwitch(checked:Provider.of<RegisterViewModel>(context).getSolar == 0? false: true,onChange: (v) {setState(() {(context).read<RegisterViewModel>().SetSolar(v ? 1 : 0);});},),SizedBox(width: 8,),Text(Provider.of<RegisterViewModel>(context).getSolar == 0? "阳历": "阴历")],),onClick: () async {DatePicker.showDatePicker(context,showTitleActions: true,minTime: DateTime(, 3, 5),maxTime: DateTime(2122, 6, 7), onChanged: (date) {print('change $date');}, onConfirm: (date) {(context).read<RegisterViewModel>().SetDateTime(date);}, currentTime: DateTime.now(), locale: LocaleType.zh);},),

数据模型

import 'package:flutter/material.dart';class RegisterViewModel extends ChangeNotifier{DateTime _dateTime;int _gender = 0;//0男 1=女int _solar = 0;//0表阳历 1=阴历String get getDateTime{if(_dateTime == null)return "";return _dateTime.year.toString() + "年" +_dateTime.month.toString() +"月"+_dateTime.day.toString()+"日";}void SetDateTime(DateTime dateTime){_dateTime = dateTime;notifyListeners();}int get getGender{return _gender;}int get getSolar{return _solar;}void SetGender(int gender){_gender = gender;}void SetSolar(int solar){_solar = solar;}}

三、flutter登录注册功能的实现

Register_viewmodel.dart

import 'dart:convert';import 'package:myitem/util/rsa_utils.dart';import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:flutter_easyloading/flutter_easyloading.dart';import 'package:myitem/model/register_model.dart';class RegisterViewModel extends ChangeNotifier {DateTime _dateTime;int _gender = 0; //0男 1=女int _solar = 0; //0表阳历 1=阴历bool _getloading = false;bool get getloading {//返回return _getloading;}// ignore: avoid_return_types_on_settersvoid setloading(bool value) {_getloading = value;notifyListeners();}String get getDateTime {if (_dateTime == null) return "";return _dateTime.year.toString() +"-" +_dateTime.month.toString() +"-" +_dateTime.day.toString();}void SetDateTime(DateTime dateTime) {_dateTime = dateTime;notifyListeners();}int get getGender {return _gender;}int get getSolar {return _solar;}void SetGender(int gender) {_gender = gender;}void SetSolar(int solar) {_solar = solar;}void login(String user, String pwd, String name, String phone, String code) async {setloading(true);if (user == null || user.isEmpty) {EasyLoading.showToast("用户名不能为空");} else if (pwd == null || pwd.isEmpty) {EasyLoading.showToast("密码不能为空");} else if (phone == null || phone.isEmpty) {EasyLoading.showToast("手机号不能为空");} else if (code == null || code.isEmpty) {EasyLoading.showToast("验证码不能为空");}String pass = await encodeString(pwd);//使用rsa进行加密Response result = await RegisterModel(json.encode({"username": user,"password": pass,"phone": phone,"name": name,"gender": _gender,"birthday": getDateTime,"solar": _solar,}));if (result.data["success"]) {EasyLoading.showSuccess("success");} else {EasyLoading.showError(result.data["msg"]);}setloading(false);return;}}

Register.dart

import 'package:flutter/material.dart';import 'package:myitem/base/view.dart';import 'package:myitem/viewmodel/Register_viewmodel.dart';import 'package:provider/provider.dart';import 'package:tdui/tdui.dart';import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';class RegisterPage extends StatefulWidget {const RegisterPage({Key key}) : super(key: key);@override_RegisterPageState createState() => _RegisterPageState();}class _RegisterPageState extends State<RegisterPage> {TextEditingController _user = TextEditingController();TextEditingController _pass = TextEditingController();TextEditingController _phone = TextEditingController();TextEditingController _code = TextEditingController();TextEditingController _name = TextEditingController();@overridevoid initState() {super.initState();_user = TextEditingController();_pass = TextEditingController();_phone = TextEditingController();_code = TextEditingController();_name = TextEditingController();}@overridevoid dispose() {super.dispose();_user.dispose();_pass.dispose();_phone.dispose();_code.dispose();_name.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: getAppBar("用户注册"),body: Container(child: Column(children: [SizedBox(height: 16,),TdInput(label: "登录账号",hintText: "请输入登录用户名",clearable: true,textInputAction: TextInputAction.next,onChange: (v) {_user.text = v;},),TdInput(label: "手机号码",hintText: "请输入手机号码",textInputAction: TextInputAction.send,type: TextInputType.phone,footer: TdButton("获取验证码",theme: TdButtonType.primary,size: TdButtonSize.mini,),onChange: (v) {_phone.text = v;},),TdInput(label: "验证码",hintText: "请输入获取验证码",textInputAction: TextInputAction.next,type: TextInputType.number,clearable: true,onChange: (v) {_code.text = v;},),TdInput(label: "登录密码",hintText: "请输入获登录密码",textInputAction: TextInputAction.next,clearable: true,obscureText: true,onChange: (v) {_pass.text = v;},),TdInput(label: "中文姓名",hintText: "请输入中文姓名",textInputAction: TextInputAction.next,footer: Row(children: [TdSwitch(checked:Provider.of<RegisterViewModel>(context).getGender == 0? false: true,onChange: (v) {setState(() {(context).read<RegisterViewModel>().SetGender(v ? 1 : 0);});},),SizedBox(width: 8,),Text(Provider.of<RegisterViewModel>(context).getGender == 0? "男": "女")],),onChange: (v) {_name.text = v;},),TdCell(label: "出生日期",align: Alignment.center,content: Provider.of<RegisterViewModel>(context).getDateTime,footer: Row(children: [TdSwitch(checked:Provider.of<RegisterViewModel>(context).getSolar == 0? false: true,onChange: (v) {setState(() {(context).read<RegisterViewModel>().SetSolar(v ? 1 : 0);});},),SizedBox(width: 8,),Text(Provider.of<RegisterViewModel>(context).getSolar == 0? "阳历": "阴历")],),onClick: () async {DatePicker.showDatePicker(context,showTitleActions: true,minTime: DateTime(, 3, 5),maxTime: DateTime(2122, 6, 7), onChanged: (date) {print('change $date');}, onConfirm: (date) {(context).read<RegisterViewModel>().SetDateTime(date);}, currentTime: DateTime.now(), locale: LocaleType.zh);},),Container(margin: EdgeInsets.all(10),child: TdButton("注册",loading: Provider.of<RegisterViewModel>(context).getloading,theme: TdButtonType.warn,onClick: () {(context).read<RegisterViewModel>().login(_user.text,_pass.text, _name.text, _phone.text, _code.text);},),)],),),);}}

register_model.dart

//登录数据模型import 'package:myitem/global/Global.dart';Future RegisterModel(String json) async {//将登录的账号和密码传入return await Global.getInstance().dio.post("/zxw/user/register",queryParameters: {"json":json,});//调用实例对象后的dio接口dio接口采用接口文档中对应的接口方式get/post提交数据，文档中//有固定传入参数两个主键请求的结果异步返回给viewmodel}

main.dart

import 'package:flutter/material.dart';import 'package:flutter_easyloading/flutter_easyloading.dart';import 'package:myitem/router/route_handler.dart';import 'package:myitem/view/User/UserLogin.dart';import 'package:myitem/viewmodel/Register_viewmodel.dart';import 'package:myitem/viewmodel/login_viewmodel.dart';import 'package:myitem/viewmodel/theme_viewmodel.dart';import 'package:provider/provider.dart';import 'package:shared_preferences/shared_preferences.dart';import 'global/global_theme.dart';final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();void main() async {//持久化处理背景颜色WidgetsFlutterBinding.ensureInitialized();SharedPreferences sp = await SharedPreferences.getInstance();int color = await sp.getInt("color") ?? 0;ThemViewmodel themeViewmodel = ThemViewmodel();themeViewmodel.setColor(color);//runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (context) => LoginViewmodel(),),ChangeNotifierProvider(create: (context) => themeViewmodel,),ChangeNotifierProvider(create:(context)=>RegisterViewModel())],child: const MyApp(),),);}void loadData()async{}class MyApp extends StatefulWidget {const MyApp({Key key}) : super(key: key);@override_MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> {@overridevoid initState() {super.initState();// initPlatformState();}@overrideWidget build(BuildContext context) {return MaterialApp(navigatorKey: navigatorKey,title: 'Flutter Demo',theme: ThemeData(primarySwatch: themes[Provider.of<ThemViewmodel>(context).getColor],buttonTheme: ButtonThemeData(buttonColor: themes[Provider.of<ThemViewmodel>(context).getColor],textTheme: ButtonTextTheme.primary,),),home: UserLogin(),onGenerateRoute: AppRouteManager.getInstance().onGenerateRoute,debugShowCheckedModeBanner: false, //去掉默认标签builder: EasyLoading.init(),);}}

由于很多变量放在了状态管理中，会大量的消耗app的内存，所以进行了一些优化

Register_viewmodel.dart

import 'dart:convert';import 'package:flutter_easyloading/flutter_easyloading.dart';import 'package:myitem/util/rsa_utils.dart';import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:myitem/model/register_model.dart';class RegisterViewModel extends ChangeNotifier {void login(String user, String pwd, String name, String phone, String code,int _gender, int _solar, String getDateTime) async {String pass = await encodeString(pwd); //使用rsa进行加密Response result = await RegisterModel(json.encode({"username": user,"password": pass,"phone": phone,"name": name,"gender": _gender,"birthday": getDateTime,"solar": _solar,}));if (result.data["success"]) {EasyLoading.showToast("注册成功");// Navigator.pop(navigatorKey.currentContext, {// "user": user,// "pass": pass,// }// );} else {EasyLoading.showError(result.data["msg"]);}return;}}

date_util.dart

//修改日期String getDate(DateTime _dateTime) {return _dateTime == null? "": _dateTime.year.toString() +"-" +_dateTime.month.toString() +"-" +_dateTime.day.toString();}

Register.dart

import 'package:flutter/material.dart';import 'package:myitem/base/view.dart';import 'package:myitem/util/date_util.dart';import 'package:myitem/viewmodel/Register_viewmodel.dart';import 'package:provider/provider.dart';import 'package:tdui/tdui.dart';import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';import 'package:flutter_easyloading/flutter_easyloading.dart';class RegisterPage extends StatefulWidget {const RegisterPage({Key key}) : super(key: key);@override_RegisterPageState createState() => _RegisterPageState();}class _RegisterPageState extends State<RegisterPage> {TextEditingController _user = TextEditingController();TextEditingController _pass = TextEditingController();TextEditingController _phone = TextEditingController();TextEditingController _code = TextEditingController();TextEditingController _name = TextEditingController();DateTime _dateTime;int _gender = 0; //0男 1=女int _solar = 0; //0表阳历 1=阴历@overridevoid initState() {super.initState();_user = TextEditingController();_pass = TextEditingController();_phone = TextEditingController();_code = TextEditingController();_name = TextEditingController();}@overridevoid dispose() {super.dispose();_user.dispose();_pass.dispose();_phone.dispose();_code.dispose();_name.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: getAppBar("用户注册"),body: Container(child: Column(children: [SizedBox(height: 16,),TdInput(label: "登录账号",hintText: "请输入登录用户名",clearable: true,textInputAction: TextInputAction.next,onChange: (v) {_user.text = v;},),TdInput(label: "手机号码",hintText: "请输入手机号码",textInputAction: TextInputAction.send,type: TextInputType.phone,footer: TdButton("获取验证码",theme: TdButtonType.primary,size: TdButtonSize.mini,),onChange: (v) {_phone.text = v;},),TdInput(label: "验证码",hintText: "请输入获取验证码",textInputAction: TextInputAction.next,type: TextInputType.number,clearable: true,onChange: (v) {_code.text = v;},),TdInput(label: "登录密码",hintText: "请输入获登录密码",textInputAction: TextInputAction.next,clearable: true,obscureText: true,onChange: (v) {_pass.text = v;},),TdInput(label: "中文姓名",hintText: "请输入中文姓名",textInputAction: TextInputAction.next,footer: Row(children: [TdSwitch(checked: _gender == 0 ? false : true,onChange: (v) {setState(() {v ? _gender = 1 : _gender = 0;});},),SizedBox(width: 8,),Text(_gender == 0 ? "男" : "女")],),onChange: (v) {_name.text = v;},),TdCell(label: "出生日期",align: Alignment.center,content: getDate(_dateTime),footer: Row(children: [TdSwitch(checked: _solar == 0 ? false : true,onChange: (v) {setState(() {v ? _solar = 1 : _solar = 0;});},),SizedBox(width: 8,),Text(_solar == 0 ? "阳历" : "阴历")],),onClick: () async {DatePicker.showDatePicker(context,showTitleActions: true,minTime: DateTime(, 3, 5),maxTime: DateTime(2122, 6, 7),onChanged: (date) {}, onConfirm: (date) {setState(() {_dateTime = date;});}, currentTime: DateTime.now(), locale: LocaleType.zh);},),Container(margin: EdgeInsets.all(10),child: TdButton("注册",theme: TdButtonType.warn,onClick: () {_register();},),)],),),);}void _register() {print("object");if (_user.text == null || _user.text.isEmpty) {EasyLoading.showToast("用户名不能为空");} else if (_pass.text == null || _pass.text.isEmpty) {EasyLoading.showToast("密码不能为空");} else if (_phone.text == null || _phone.text.isEmpty) {EasyLoading.showToast("手机号不能为空");} else if (_code.text == null || _code.text.isEmpty) {EasyLoading.showToast("验证码不能为空");}(context).read<RegisterViewModel>().login(_user.text, _pass.text,_name.text, _phone.text, _code.text, _gender, _solar, getDate(_dateTime));}}

用路由传值返回对象，实现注册后，可以在登录界面保留注册账户信息

Register_viewmodel.dart

import 'dart:convert';import 'package:flutter_easyloading/flutter_easyloading.dart';import 'package:myitem/main.dart';import 'package:myitem/util/rsa_utils.dart';import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:myitem/model/register_model.dart';class RegisterViewModel extends ChangeNotifier {void login(String user, String pwd, String name, String phone, String code,int _gender, int _solar, String getDateTime) async {String pass = await encodeString(pwd); //使用rsa进行加密Response result = await RegisterModel(json.encode({"username": user,"password": pass,"phone": phone,"name": name,"gender": _gender,"birthday": getDateTime,"solar": _solar,}));if (result.data["success"]) {Navigator.pop(navigatorKey.currentContext, {"user": user,"pass": pwd,});EasyLoading.showSuccess("注册成功");} else {EasyLoading.showError(result.data["msg"]);}return;}}

UserLogin_view.dart

import 'package:flutter/material.dart';import 'package:flutter_easyloading/flutter_easyloading.dart';import 'package:myitem/base/view.dart';import 'package:myitem/global/Global.dart';import 'package:myitem/viewmodel/login_viewmodel.dart';import 'package:shared_preferences/shared_preferences.dart';import 'package:tdui/tdui.dart';import 'package:provider/provider.dart';class UserLogin extends StatefulWidget {const UserLogin({Key key}) : super(key: key);@override_UserLoginState createState() => _UserLoginState();}class _UserLoginState extends State<UserLogin> {TextEditingController _userName; //创建controller进行全局状态管理TextEditingController _password;@overridevoid initState() {super.initState();_userName = TextEditingController();_password = TextEditingController();// loadData();}@overridevoid dispose() {super.dispose(); //节省资源_userName.dispose();_password.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: getAppBar("登录"),body: Padding(padding: EdgeInsets.all(20),child: Column(children: [SizedBox(height: 16,),TextField(decoration: InputDecoration(labelText: "账号",hintText: "请输入账号",prefix: Icon(Icons.person),),autofocus: true,textInputAction: TextInputAction.next,controller: _userName,),TextField(controller: _password,decoration: InputDecoration(labelText: "密码", hintText: "请输入密码", prefix: Icon(Icons.lock)),obscureText: true,textInputAction: TextInputAction.send,),SizedBox(height: 16,),GestureDetector(child: Container(width: double.infinity,child: Text("找回密码",style: TextStyle(color: Colors.blue),textAlign: TextAlign.right,),),onTap: () {print("找回密码");},),SizedBox(height: 16,),TdButton('登录',theme: TdButtonType.primary,onClick: () {_login();},),SizedBox(height: 16,),TdButton('注册',theme: TdButtonType.primary,onClick: () {_register();},)],),),);}void _login() {if (_userName.text.isEmpty) {EasyLoading.showError("账号不能为空");return;} else if (_password.text.isEmpty) {EasyLoading.showError("密码不能为空");return;}context.read<LoginViewmodel>().login(_userName.text, _password.text);}void _register() async {dynamic params = await Navigator.of(context).pushNamed("/RegisterPage");if (params != null) {setState(() {_userName.text = params["user"];_password.text = params["pass"];});}}void loadData() async {SharedPreferences sp = await SharedPreferences.getInstance();String token = await sp.getString("token");print(token);if (token != null) {//将里面的token对象赋值到获取的token值Global.getInstance().dio.options.headers["token"] = token;context.read<LoginViewmodel>().tokenLogin(token);}}}/* view层调用viewmodel，viewmodel通知model层，model再发送请求返回给viewmodel，viewmodel处理返回结果并刷新view*/

持久化管理，报错token值

login_viewmodel.dart

import 'package:dio/dio.dart';import 'package:flutter/cupertino.dart';import 'package:flutter_easyloading/flutter_easyloading.dart';import 'package:myitem/global/Global.dart';import 'package:myitem/model/login_model.dart';import 'package:shared_preferences/shared_preferences.dart';import '../main.dart';//创建登录状态管理class LoginViewmodel extends ChangeNotifier {void login(String user, String pass) async {//持久化管理SharedPreferences sp = await SharedPreferences.getInstance();Response result = await loginModel(user, pass);if (result.data["success"]) {Global.getInstance().token = result.data["data"]["token"];Global.getInstance().user = result.data["data"]["user"];sp.setString("token", result.data["data"]["token"]);Global.getInstance().dio.options.headers["token"] =result.data["data"]["token"];//下次验证token是不是过期了EasyLoading.showSuccess("success");Navigator.of(navigatorKey.currentContext).popAndPushNamed("/MenuPage");} else {EasyLoading.showError(result.data["msg"]);}}void tokenLogin(String token) async {SharedPreferences sp = await SharedPreferences.getInstance();Response result = await tokenLoginModel();if (result.data["success"]) {//如果请求成功Global.getInstance().user =result.data["data"]; //将将请求结果中的data赋值为gobal中的userNavigator.of(navigatorKey.currentContext).popAndPushNamed("/menu"); //跳转路由} else {sp.remove("token"); //如果不成功就移除持久化管理中创建的token对象}}}

login_viewmodel.dart

import 'package:dio/dio.dart';import 'package:flutter/cupertino.dart';import 'package:flutter_easyloading/flutter_easyloading.dart';import 'package:myitem/global/Global.dart';import 'package:myitem/model/login_model.dart';import 'package:shared_preferences/shared_preferences.dart';import '../main.dart';//创建登录状态管理class LoginViewmodel extends ChangeNotifier {void login(String user, String pass) async {//持久化管理SharedPreferences sp = await SharedPreferences.getInstance();Response result = await loginModel(user, pass);if (result.data["success"]) {Global.getInstance().token = result.data["data"]["token"];Global.getInstance().user = result.data["data"]["user"];sp.setString("token", result.data["data"]["token"]);Global.getInstance().dio.options.headers["token"] =result.data["data"]["token"];//下次验证token是不是过期了EasyLoading.showSuccess("success");Navigator.of(navigatorKey.currentContext).popAndPushNamed("/MenuPage");} else {EasyLoading.showError(result.data["msg"]);}}void tokenLogin(String token) async {SharedPreferences sp = await SharedPreferences.getInstance();Response result = await tokenLoginModel();if (result.data["success"]) {//如果请求成功Global.getInstance().user =result.data["data"]; //将将请求结果中的data赋值为gobal中的userNavigator.of(navigatorKey.currentContext).popAndPushNamed("/menu"); //跳转路由} else {sp.remove("token"); //如果不成功就移除持久化管理中创建的token对象}}}