一、provider狀態(tài)管理設(shè)置主題顏色

第一步：
安裝依賴(lài)庫(kù)

provider: ^4.3.2+3

第二步:
創(chuàng)建共享數(shù)據(jù)模型

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函數(shù)中引入共享模型

第三步:
創(chuàng)建base顏色數(shù)組

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

在主題中使用provider狀態(tài)管理，由于想讓顏色的值發(fā)生改變這里我們使用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]), //變換主題顏色);} }

第四步:
畫(huà)出ui，并添加點(diǎn)擊事件

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,//如果加()就是執(zhí)行這個(gè)方法,不加就是將這個(gè)返回), ),));}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登錄功能的實(shí)現(xiàn)

第一步：創(chuàng)建目錄文件夾

第二步：
配置yaml文件依賴(lài)

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

編寫(xiě)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 = "連接超時(shí)錯(cuò)誤";} else {msg = "接口錯(cuò)誤！";}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, //去掉默認(rèn)標(biāo)簽);} }

loginmodel.dart

//登錄數(shù)據(jù)模型 import 'package:myitem/global/Global.dart'; import 'package:myitem/util/rsa_utils.dart';Future loginModel(String user, String pass) async {//將登錄的賬號(hào)和密碼傳入String pwd = await encodeString(pass);//使用rsa進(jìn)行加密return await Global.getInstance().dio.post("/zxw/user",queryParameters: {"username":user,"password":pwd});//調(diào)用實(shí)例對(duì)象后的dio接口dio接口采用接口文檔中對(duì)應(yīng)的接口方式get/post提交數(shù)據(jù)，文檔中//有固定傳入?yún)?shù)兩個(gè)主鍵請(qǐng)求的結(jié)果異步返回給viewmodel } /* view層調(diào)用viewmodel，viewmodel通知model層，model再 發(fā)送請(qǐng)求返回給viewmodel，viewmodel處理返回結(jié)果并刷新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();//節(jié)省資源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: "賬號(hào)",hintText: "請(qǐng)輸入賬號(hào)",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: "請(qǐng)輸入密碼", 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('注冊(cè)',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層調(diào)用viewmodel，viewmodel通知model層，model再 發(fā)送請(qǐng)求返回給viewmodel，viewmodel處理返回結(jié)果并刷新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';//創(chuàng)建登錄狀態(tài)管理 class LoginViewmodel extends ChangeNotifier {bool _isLogin = false;TextEditingController _userName; //創(chuàng)建controller進(jìn)行全局狀態(tài)管理TextEditingController _password;bool get getIsLogin {//返回return _isLogin;}TextEditingController get getUser {_userName ??= TextEditingController();//返回return _userName;}TextEditingController get getPwd {_password ??= TextEditingController(); //如果沒(méi)有創(chuàng)建那么進(jìn)行實(shí)例化//返回return _password;}// ignore: avoid_return_types_on_settersvoid setIsLogin(bool value) {_isLogin = value;notifyListeners();}void login(BuildContext context) async {setIsLogin(true); //先設(shè)置為trueif (getUser.text.isEmpty) {//判斷賬號(hào)是否為空TdToast.fail(context)(message: "賬號(hào)不能為空");setIsLogin(false); //如果為空那么就返回falsereturn;} else if (getPwd.text.isEmpty) {//如果密碼為空，那么返回falseTdToast.fail(context)(message: "密碼不能為空");setIsLogin(false);return;}//如果賬號(hào)密碼都不是空那么,用response接收賬號(hào)和密碼從viewmodel傳值到數(shù)據(jù)模型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),//變換主題顏色

實(shí)現(xiàn)開(kāi)關(guān)功能

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? "陽(yáng)歷": "陰歷")],),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);},),

數(shù)據(jù)模型

import 'package:flutter/material.dart'; class RegisterViewModel extends ChangeNotifier{DateTime _dateTime;int _gender = 0;//0男 1=女int _solar = 0;//0表陽(yáng)歷 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登錄注冊(cè)功能的實(shí)現(xiàn)

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表陽(yáng)歷 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("手機(jī)號(hào)不能為空");} else if (code == null || code.isEmpty) {EasyLoading.showToast("驗(yàn)證碼不能為空");}String pass = await encodeString(pwd);//使用rsa進(jìn)行加密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("用戶注冊(cè)"),body: Container(child: Column(children: [SizedBox(height: 16,),TdInput(label: "登錄賬號(hào)",hintText: "請(qǐng)輸入登錄用戶名",clearable: true,textInputAction: TextInputAction.next,onChange: (v) {_user.text = v;},),TdInput(label: "手機(jī)號(hào)碼",hintText: "請(qǐng)輸入手機(jī)號(hào)碼",textInputAction: TextInputAction.send,type: TextInputType.phone,footer: TdButton("獲取驗(yàn)證碼",theme: TdButtonType.primary,size: TdButtonSize.mini,),onChange: (v) {_phone.text = v;},),TdInput(label: "驗(yàn)證碼",hintText: "請(qǐng)輸入獲取驗(yàn)證碼",textInputAction: TextInputAction.next,type: TextInputType.number,clearable: true,onChange: (v) {_code.text = v;},),TdInput(label: "登錄密碼",hintText: "請(qǐng)輸入獲登錄密碼",textInputAction: TextInputAction.next,clearable: true,obscureText: true,onChange: (v) {_pass.text = v;},),TdInput(label: "中文姓名",hintText: "請(qǐng)輸入中文姓名",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? "陽(yáng)歷": "陰歷")],),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("注冊(cè)",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

//登錄數(shù)據(jù)模型 import 'package:myitem/global/Global.dart';Future RegisterModel(String json) async {//將登錄的賬號(hào)和密碼傳入return await Global.getInstance().dio.post("/zxw/user/register",queryParameters: {"json":json,});//調(diào)用實(shí)例對(duì)象后的dio接口dio接口采用接口文檔中對(duì)應(yīng)的接口方式get/post提交數(shù)據(jù)，文檔中//有固定傳入?yún)?shù)兩個(gè)主鍵請(qǐng)求的結(jié)果異步返回給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, //去掉默認(rèn)標(biāo)簽builder: EasyLoading.init(),);} }

由于很多變量放在了狀態(tài)管理中，會(huì)大量的消耗app的內(nèi)存，所以進(jìn)行了一些優(yōu)化
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進(jìn)行加密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("注冊(cè)成功");// 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表陽(yáng)歷 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("用戶注冊(cè)"),body: Container(child: Column(children: [SizedBox(height: 16,),TdInput(label: "登錄賬號(hào)",hintText: "請(qǐng)輸入登錄用戶名",clearable: true,textInputAction: TextInputAction.next,onChange: (v) {_user.text = v;},),TdInput(label: "手機(jī)號(hào)碼",hintText: "請(qǐng)輸入手機(jī)號(hào)碼",textInputAction: TextInputAction.send,type: TextInputType.phone,footer: TdButton("獲取驗(yàn)證碼",theme: TdButtonType.primary,size: TdButtonSize.mini,),onChange: (v) {_phone.text = v;},),TdInput(label: "驗(yàn)證碼",hintText: "請(qǐng)輸入獲取驗(yàn)證碼",textInputAction: TextInputAction.next,type: TextInputType.number,clearable: true,onChange: (v) {_code.text = v;},),TdInput(label: "登錄密碼",hintText: "請(qǐng)輸入獲登錄密碼",textInputAction: TextInputAction.next,clearable: true,obscureText: true,onChange: (v) {_pass.text = v;},),TdInput(label: "中文姓名",hintText: "請(qǐng)輸入中文姓名",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 ? "陽(yáng)歷" : "陰歷")],),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("注冊(cè)",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("手機(jī)號(hào)不能為空");} else if (_code.text == null || _code.text.isEmpty) {EasyLoading.showToast("驗(yàn)證碼不能為空");}(context).read<RegisterViewModel>().login(_user.text, _pass.text,_name.text, _phone.text, _code.text, _gender, _solar, getDate(_dateTime));} }

用路由傳值返回對(duì)象，實(shí)現(xiàn)注冊(cè)后，可以在登錄界面保留注冊(cè)賬戶信息
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進(jìn)行加密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("注冊(cè)成功");} 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; //創(chuàng)建controller進(jìn)行全局狀態(tài)管理TextEditingController _password;@overridevoid initState() {super.initState();_userName = TextEditingController();_password = TextEditingController();// loadData();}@overridevoid dispose() {super.dispose(); //節(jié)省資源_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: "賬號(hào)",hintText: "請(qǐng)輸入賬號(hào)",prefix: Icon(Icons.person),),autofocus: true,textInputAction: TextInputAction.next,controller: _userName,),TextField(controller: _password,decoration: InputDecoration(labelText: "密碼", hintText: "請(qǐng)輸入密碼", 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('注冊(cè)',theme: TdButtonType.primary,onClick: () {_register();},)],),),);}void _login() {if (_userName.text.isEmpty) {EasyLoading.showError("賬號(hào)不能為空");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對(duì)象賦值到獲取的token值Global.getInstance().dio.options.headers["token"] = token;context.read<LoginViewmodel>().tokenLogin(token);}} }/* view層調(diào)用viewmodel，viewmodel通知model層，model再 發(fā)送請(qǐng)求返回給viewmodel，viewmodel處理返回結(jié)果并刷新view*/

持久化管理，報(bào)錯(cuò)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';//創(chuàng)建登錄狀態(tài)管理 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"];//下次驗(yàn)證token是不是過(guò)期了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"]) {//如果請(qǐng)求成功Global.getInstance().user =result.data["data"]; //將將請(qǐng)求結(jié)果中的data賦值為gobal中的userNavigator.of(navigatorKey.currentContext).popAndPushNamed("/menu"); //跳轉(zhuǎn)路由} else {sp.remove("token"); //如果不成功就移除持久化管理中創(chuàng)建的token對(duì)象}} }

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';//創(chuàng)建登錄狀態(tài)管理 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"];//下次驗(yàn)證token是不是過(guò)期了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"]) {//如果請(qǐng)求成功Global.getInstance().user =result.data["data"]; //將將請(qǐng)求結(jié)果中的data賦值為gobal中的userNavigator.of(navigatorKey.currentContext).popAndPushNamed("/menu"); //跳轉(zhuǎn)路由} else {sp.remove("token"); //如果不成功就移除持久化管理中創(chuàng)建的token對(duì)象}} }

總結(jié)

以上是生活随笔為你收集整理的flutter基于provider状态管理设置主题颜色、实现简单登录、注册功能---页面+逻辑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。