Flutter項目之登錄注冊功能實現

- 1、頁面效果
- 2、登錄兩種狀態界面
- 3、中間按鈕部分
- 4、廣告區域
- 5、最新資訊
- 6、登錄注冊頁聯調
- - 6.1、網絡請求工具類
  - 6.2、注冊頁聯調
  - 6.3、登錄問題分析
  - 6.4、本地緩存
  - 6.5、共享token
  - 6.6、登錄頁聯調
  - 6.7、退出登錄

1、頁面效果

在這里插入圖片描述

import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/info/index.dart';
import 'package:flutter_haoke/pages/home/tab_profile/adverWidget.dart';
import 'package:flutter_haoke/pages/home/tab_profile/function_button.dart';
import 'package:flutter_haoke/pages/home/tab_profile/header.dart';class TabProfile extends StatelessWidget {const TabProfile({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(elevation: 0,title: Text("我的"),actions: [IconButton(onPressed: () {Navigator.of(context).pushNamed("setting");},icon: Icon(Icons.settings))],),body: ListView(children: [Header(),FunctionButton(),AdverWidget(),//引用5中的最新資訊Info(showTitle: true,)],),);}
}

2、登錄兩種狀態界面

在這里插入圖片描述

import 'dart:ui';import 'package:flutter/material.dart';
import 'package:flutter_haoke/scopoed_model/auth_model.dart';
import 'package:flutter_haoke/utils/scopoed_mode_helper.dart';var loginRegisterStyle = TextStyle(color: Colors.white, fontSize: 18);class Header extends StatelessWidget {const Header({Key? key}) : super(key: key);Widget _notloginBuild(BuildContext context) {return Container(height: 100,decoration: BoxDecoration(color: Colors.green),padding: EdgeInsets.only(left: 10, top: 20, bottom: 20),child: Row(children: [Container(margin: EdgeInsets.only(right: 10),width: 65,height: 65,child: CircleAvatar(backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6ly1g6tbgbqv2nj30i20i2wen.jpg"),)),Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// Padding(padding: EdgeInsets.only(top: 10)),Row(children: [GestureDetector(onTap: () {Navigator.of(context).pushNamed("login");},child: Text("登錄",style: loginRegisterStyle,),),Text("/",style: loginRegisterStyle,),GestureDetector(onTap: () {Navigator.of(context).pushNamed("register");},child: Text("注冊",style: loginRegisterStyle,),),],),Text("登錄后獲取更多體驗",style: TextStyle(color: Colors.white),)],)],),);}Widget _loginBuild(BuildContext context) {var userInfo =ScopoedModelHelper.getModel<AuthModel>(context).userInfo;String userName ="張三";if (userInfo !=null && userInfo.name !=null) userName =userInfo.name;String userImage ="https://tva1.sinaimg.cn/large/006y8mN6ly1g6tbnovh8jj30hr0hrq3l.jpg";if (userInfo !=null && userInfo.avator !=null) userImage =userInfo.avator;return Container(height: 100,decoration: BoxDecoration(color: Colors.green),padding: EdgeInsets.only(left: 10, top: 20, bottom: 20),child: Row(children: [Container(margin: EdgeInsets.only(right: 10),width: 65,height: 65,child: CircleAvatar(backgroundImage: NetworkImage(userImage),)),Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// Padding(padding: EdgeInsets.only(top: 10)),Text(userName,style: loginRegisterStyle,),Text("查看編輯個人信息",style: TextStyle(color: Colors.white),)],)],),);}@overrideWidget build(BuildContext context) {//從本地存儲AuthModel中獲取登錄態var islogin = ScopoedModelHelper.getModel<AuthModel>(context).isLogin;print(islogin.toString());return islogin ? _loginBuild(context) : _notloginBuild(context);}
}

3、中間按鈕部分

在這里插入圖片描述

import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/tab_profile/function_button_data.dart';
import 'package:flutter_haoke/pages/home/tab_profile/function_button_widget.dart';class FunctionButton extends StatelessWidget {const FunctionButton({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(child: Wrap(spacing: 1,runSpacing: 1,children: list.map((item) {return FunctionButtonWidget(item);}).toList()),);}
}

import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/tab_profile/function_button_data.dart';class FunctionButtonWidget extends StatelessWidget {final FunctionButtonItem data;const FunctionButtonWidget(this.data, {Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return GestureDetector(onTap: () {data.onTapHandle(context);},child: Container(margin: EdgeInsets.only(top: 30),width: MediaQuery.of(context).size.width * 0.33,child: Column(children: [Image.asset(data.imageUrl), Text(data.title)],),),);}
}

4、廣告區域

在這里插入圖片描述

import 'package:flutter/material.dart';class AdverWidget extends StatelessWidget {const AdverWidget({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.only(left: 10, right: 10, top: 30, bottom: 20),child: Image.network("https://tva1.sinaimg.cn/large/006y8mN6ly1g6te62n8f4j30j603vgou.jpg"),);}
}

5、最新資訊

在這里插入圖片描述

import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/info/data.dart';
import 'package:flutter_haoke/pages/home/info/index_widget.dart';class Info extends StatelessWidget {final bool showTitle;final List<InfoItem> dataList;const Info({Key? key, this.showTitle = false, this.dataList = infoData}): super(key: key);@overrideWidget build(BuildContext context) {return Container(child: Column(children: [if (showTitle)Container(padding: EdgeInsets.all(10),alignment: Alignment.centerLeft,child: Text("更多資訊",style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600),),),Column(children: dataList.map((e) {return InfoItemWidget(e);}).toList(),)],),);}
}

6、登錄注冊頁聯調

6.1、網絡請求工具類

在這里插入圖片描述

import 'dart:convert';
import 'dart:ffi';
import 'dart:io';import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_haoke/config.dart';
import 'package:flutter_haoke/routes.dart';
import 'package:flutter_haoke/scopoed_model/auth_model.dart';
import 'package:flutter_haoke/utils/common_toast.dart';
import 'package:flutter_haoke/utils/scopoed_mode_helper.dart';class DioHttp {late Dio _client;late BuildContext context;static DioHttp of(BuildContext context) {return DioHttp._innernal(context);}DioHttp._innernal(BuildContext context) {this.context = context;var options = BaseOptions(baseUrl: Config.BaseUrl,connectTimeout: 1000 * 10, //請求超時時間：10秒receiveTimeout: 1000 * 3,extra: {'context': context});Interceptor interceptor =InterceptorsWrapper(onResponse: (response, handler) {if (response == null) return handler.next(response);var code = json.decode(response.toString())['code'];if (code == 404) {CommontToast.showToast("地址路徑錯誤");return handler.next(response);}if (code.toString().startsWith('4')) {//退出登錄ScopoedModelHelper.getModel<AuthModel>(context).logout();//登錄過期時如果是啟動頁不用跳轉到登錄頁if (ModalRoute.of(context)!.settings.name == Routes.loading) {return handler.next(response);}CommontToast.showToast("登錄過期！");Navigator.of(context).pushNamed(Routes.login); }return handler.next(response);});_client = Dio(options);_client.interceptors.add(interceptor);this._client = _client;// if (_client == null || context != this.context) {//   this.context = context;//   var options = BaseOptions(//       baseUrl: Config.BaseUrl,//       connectTimeout: 1000 * 10, //請求超時時間：10秒//       receiveTimeout: 1000 * 3,//       extra: {'context': context});//   _client = Dio(options);//   this._client = _client;// }}Future<Response<Map<String, dynamic>>> get(String path,[Map<String, dynamic>? params, String? token]) async {var options = Options(headers: {'Authorization': token});return await _client.get(path, queryParameters: params, options: options);}Future<Response<Map<String, dynamic>>> post(String path,[Map<String, dynamic>? params, String? token]) async {var options = Options(headers: {'Authorization': token});return await _client.post(path, data: params, options: options);}Future<Response<Map<String, dynamic>>> postFormData(String path,[dynamic params, String? token]) async {var options = Options(contentType: 'multipart/form-data', headers: {'Authorization': token});return await _client.post(path, data: params, options: options);}
}

6.2、注冊頁聯調

在這里插入圖片描述

import 'package:flutter/material.dart';
import 'package:flutter_haoke/utils/common_toast.dart';
import 'package:flutter_haoke/utils/dio_http.dart';
import 'package:flutter_haoke/utils/string_is_bull_or_empty.dart';class RegisterPage extends StatefulWidget {const RegisterPage({Key? key}) : super(key: key);@overrideState<RegisterPage> createState() => _RegisterPageState();
}class _RegisterPageState extends State<RegisterPage> {//定義三個TextEditingController與用戶名，密碼，確認密碼綁定var usernameController = TextEditingController();var passwordController = TextEditingController();var surePsdController = TextEditingController();_onRegisterHandle() async {var username = usernameController.text;var password = passwordController.text;var surePsd = surePsdController.text;if (password != surePsd) {return CommontToast.showToast("兩次輸入的密碼不一致！");}if (StringIsNullOrEmpty(username) || StringIsNullOrEmpty(password)) {return CommontToast.showToast("用戶名或密碼不能為空！");}const url = "/register";var params = {'username': username, 'password': password};//請求后端注冊接口存用戶信息var res = await DioHttp.of(context).post(url, params);
//  {"data":{"code":0,"data":[{"name":"admin","ps":123}],"message":"success"}}if (res.data!["data"]["code"] == 0) {//存儲成功后跳轉到登錄頁進行登錄CommontToast.showToast(res.data!["data"]["message"]);Navigator.of(context).pushReplacementNamed("login");}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("注冊"),),body: SafeArea(minimum: EdgeInsets.all(30),child: ListView(children: [TextField(//進行綁定controller: usernameController,decoration: InputDecoration(labelText: "用戶名",),),Padding(padding: EdgeInsets.all(10)),TextField(//進行綁定controller: passwordController,obscureText: true,decoration: InputDecoration(labelText: "密碼",),),Padding(padding: EdgeInsets.all(10)),TextField(//進行綁定controller: surePsdController,obscureText: true,decoration: InputDecoration(labelText: "確認密碼",),),Padding(padding: EdgeInsets.all(10)),ElevatedButton(child: Text("注冊"),//點擊后執行注冊的邏輯處理onPressed: () {_onRegisterHandle();},),Padding(padding: EdgeInsets.all(10)),Row(mainAxisAlignment: MainAxisAlignment.center,children: [Text("已有賬號，"),TextButton(onPressed: () {Navigator.pushReplacementNamed(context, "register");},child: Text("去登錄~"))],)],),));}
}

6.3、登錄問題分析

在這里插入圖片描述

6.4、本地緩存

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';enum StoreKeys {token,city
}class Store {static late StoreKeys storeKeys;final SharedPreferences _store;static Future<Store> getInstance() async {SharedPreferences prefs = await SharedPreferences.getInstance();return Store._internal(prefs);}Store._internal(this._store);getString(StoreKeys key) async {return _store.get(key.toString());}setString(StoreKeys key, String value) async {return _store.setString(key.toString(), value);}getStringList(StoreKeys key) async {return _store.getStringList(key.toString());}setStringList(StoreKeys key, List<String> value) async {return _store.setStringList(key.toString(), value);}
}

6.5、共享token

在這里插入圖片描述

import 'dart:convert';import 'package:flutter/material.dart';
import 'package:flutter_haoke/utils/dio_http.dart';
import 'package:flutter_haoke/utils/model/user_info.dart';
import 'package:flutter_haoke/utils/store.dart';
import 'package:flutter_haoke/utils/string_is_bull_or_empty.dart';
import 'package:scoped_model/scoped_model.dart';class AuthModel extends Model {String _token = '';UserInfo? _userinfo;String get token {return _token;}UserInfo? get userInfo => _userinfo;bool get isLogin {if (_token.length > 0 && _token != null) return true;return false;}void initApp(BuildContext context) async {Store store = await Store.getInstance();String token = await store.getString(StoreKeys.token);if (!StringIsNullOrEmpty(token)) {//調用登錄login(token, context);}}_getUserInfo(BuildContext context) async {var url = '/user';var res = DioHttp.of(context).get(url, {}, _token);//真實數據// var resMap = json.decode(res.toString());// var data = resMap['body'];// var userInfo = UserInfo.fromJson(data);//偽造數據var userInfo = UserInfo.fromJson({'name': "王哈哈",'avator':"https://img2.baidu.com/it/u=1274080955,1358023663&fm=26&fmt=auto",'id': '100'});_userinfo = userInfo;notifyListeners();}void login(String token, BuildContext context) {_token = token;notifyListeners();_getUserInfo(context);}void logout() async {_token = '';_userinfo = null;Store store = await Store.getInstance();store.setString(StoreKeys.token, _token);notifyListeners();print("刪除token了");}
}

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/index.dart';
import 'package:flutter_haoke/pages/loading.dart';
import 'package:flutter_haoke/routes.dart';
import 'package:flutter_haoke/scopoed_model/auth_model.dart';
import 'package:flutter_haoke/scopoed_model/city.dart';
import 'package:flutter_haoke/scopoed_model/room_filter.dart';
import 'package:scoped_model/scoped_model.dart';class Application extends StatelessWidget {const Application({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) //配置使用上路由routerFluroRouter router = FluroRouter();Routes.configureRoutes(router);//配置使用上本地緩存ScopedModelreturn ScopedModel<CityModel>(model: CityModel(),child: ScopedModel<AuthModel>(//使用了兩個model，這里配置的model都是全局的model: AuthModel(),child: ScopedModel<FilterBarModel>(model: FilterBarModel(),child: MaterialApp(theme: ThemeData(primarySwatch: Colors.green),onGenerateRoute: router.generator,// home: HomePage(),initialRoute: Routes.loading,),),));;}
}

6.6、登錄頁聯調

在這里插入圖片描述

import 'dart:async';import 'package:flutter/material.dart';
import 'package:flutter_haoke/routes.dart';
import 'package:flutter_haoke/scopoed_model/auth_model.dart';
import 'package:flutter_haoke/utils/common_toast.dart';
import 'package:flutter_haoke/utils/dio_http.dart';
import 'package:flutter_haoke/utils/scopoed_mode_helper.dart';
import 'package:flutter_haoke/utils/store.dart';
import 'package:flutter_haoke/utils/string_is_bull_or_empty.dart';
import 'package:flutter_haoke/widget/page_content.dart';class LoginPage extends StatefulWidget {const LoginPage({Key? key}) : super(key: key);@overrideState<LoginPage> createState() => _LoginPageState();
}class _LoginPageState extends State<LoginPage> {bool showPassword = false;var usernameController = TextEditingController();var passwordController = TextEditingController();_onloginHandler() async {var username = usernameController.text;var password = passwordController.text;if (StringIsNullOrEmpty(username) || StringIsNullOrEmpty(password)) {CommontToast.showToast("用戶名或密碼不能為空！");return;}var url = '/user/login';var params = {'username': username, 'password': password};var res = await DioHttp.of(context).post(url, params);print(res);//偽造假數據模擬登錄成功CommontToast.showToast('登錄成功');String token = '123';//獲取緩存變量Store store = await Store.getInstance();//存入tokenawait store.setString(StoreKeys.token, token);//更新全局modelScopoedModelHelper.getModel<AuthModel>(context).login(token, context);//這個地方登錄成功后為啥跳轉到首頁，因為項目啟動默認是去首頁，未登錄才跳到登錄頁，登錄成功后跳上一個頁面就是到首頁Timer(Duration(seconds: 1), () {//跳轉到路由堆棧的上一個頁面Navigator.of(context).pop();});//真實運行模式// if (res.data!['data']['code'] == 0) {//   CommontToast.showToast(res.data!['data']['message']);//   String token = res.data!['data']['body'];//   //獲取緩存變量//   Store store = await Store.getInstance();//   //存入token//   await store.setString(StoreKeys.token, token);//   //更新全局model//   ScopoedModelHelper.getModel<AuthModel>(context).login(token, context);//   Timer(Duration(seconds: 1), () {//     Navigator.of(context).pop();//   });// }}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("登錄"),),body: SafeArea(minimum: EdgeInsets.all(30),child: ListView(children: [TextField(controller: usernameController,decoration: InputDecoration(labelText: "用戶名",),),Padding(padding: EdgeInsets.all(10)),TextField(controller: passwordController,obscureText: !showPassword,decoration: InputDecoration(labelText: "密碼",suffixIcon: IconButton(onPressed: () {setState(() {showPassword = !showPassword;});},icon: showPassword? Icon(Icons.visibility): Icon(Icons.visibility_off))),),Padding(padding: EdgeInsets.all(10)),ElevatedButton(child: Text("登錄"),onPressed: () {_onloginHandler();},),Padding(padding: EdgeInsets.all(10)),Row(mainAxisAlignment: MainAxisAlignment.center,children: [Text("還沒有賬號，"),TextButton(onPressed: () {Navigator.pushReplacementNamed(context, Routes.register);},child: Text("去注冊~"))],)],),));}
}

6.7、退出登錄

import 'package:flutter/material.dart';
import 'package:flutter_haoke/scopoed_model/auth_model.dart';
import 'package:flutter_haoke/utils/common_toast.dart';
import 'package:flutter_haoke/utils/scopoed_mode_helper.dart';class SettingPage extends StatelessWidget {const SettingPage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("設置")),body: TextButton(onPressed: () {ScopoedModelHelper.getModel<AuthModel>(context).logout();CommontToast.showToast("退出登錄");},child: Text("退出登錄")),);}
}