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("退出登录")),);}
}