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: "https://zxw.td0f7.cn/",// 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(2010, 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;}
}

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

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(2010, 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对象}}
}

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

Flutter Provider状态管理-Consumer
前言如果对Consumer很了解的同学可以继续学习 Flutter Provider状态管理 - Selector 个人觉得Flutter的学习有三个很重要的阶段 widget的学习和使用数据以及 ...
flutter theme:themeData() 统一设置主题颜色不起作用解决方法
随着flutter组件的版本更新每一个组件的使用方法和作用都有了有些变化.今天我遇到的一个问题让我很头疼,网上找了很多没找到答案,试了好多方法最后找到了解决方法. 问题:flutter Materia ...
从零开始写第一个Flutter app（八）——修改主题颜色
目录从零开始写第一个Flutter app(一)--Hello World 从零开始写第一个Flutter app(二)--引用第三方包从零开始写第一个Flutter app(三)--有状态的部件 ...
Mac截图工具snipaste如何设置主题颜色？
mac截图工具snipaste怎么设置主题颜色呢?简单几个步骤就搞定了,需要的朋友欢迎参考哦! 具体方法如下 1.打开snipaste. 2.点击菜单栏上的首选项. 3.点击界面. 4.点击常规. 5 ...
Office如何设置主题颜色/主题色
主题颜色/主题色是什么? 主题颜色/主题色就是默认颜色,我们点击Office任何一个颜色选择按钮,显示如下: 最上面一行就是主题颜色,尤其是第4至10个颜色我们插入任意形状,形状填充的默认就是第4个 ...
java wed登录面代码_JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)...
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...
php注册登录描述,基于PHP实现用户登录注册功能的详细教程
教程前先给大家看看小编的实现成果吧! 图1: 图2: 图3: 教程: 实现这个功能我们需要五个php文件: login.php (登录界面,如图2) 登录登录页面用户名: required=&qu ...
Django练习——基于Mysql的登录注册功能界面(django模型、模板、表单简单应用)
目录 1.创建 2.配置Mysql (1)连接数据库驱动 (2)创建表格 (3)创建迁移文件并同步到数据库 3.admin后台 (1)创建超级用户 (2)注册模型login_msg 4.路由与视图 4 ...
基于android校园订餐APP，简单实现登录注册功能（SharedPreferences）
基于android校园订餐APP,简单实现登录注册功能(SharedPreferences) 欢迎浏览本篇文章界面效果图页面设计代码源代码欢迎浏览本篇文章大家好! 这是小编首次在博客上写的文 ...

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

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

二、flutter登录功能的实现

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

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

最新文章

热门文章