Flutter仿Boss-3.登录页

2024-04-03 00:36
文章标签 登录 flutter boss

本文主要是介绍Flutter仿Boss-3.登录页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果

介绍

在Flutter应用程序中创建登录页面对于用户认证和参与至关重要。登录页面作为用户访问应用程序功能的入口。它应该提供无缝的体验，同时确保安全和隐私。这里仿Boss应用设计的登录页面，我们将创建一个登录页面，允许用户使用手机号码登录或注册。

小插曲

首先，让我们设置Flutter项目并创建一个登录页面组件。我们将使用GetX进行状态管理和UI更新。确保您在开发环境中安装了Flutter和GetX。

实现

1. 依赖项

确保您在pubspec.yaml文件中具有必要的依赖项：

dependencies:flutter:sdk: flutterget: ^4.6.2
2. 登录页小部件

创建一个名为login_page.dart的新文件，并定义LoginPage小部件。此小部件将包含登录页面的UI元素：

// login_page.dart
class LoginPage extends StatelessWidget {const LoginPage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {final logic = Get.find<LoginLogic>();return Scaffold(body: Container(padding: EdgeInsets.fromLTRB(24.w, 60.w, 24.w, 24.w),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text("手机号登录/注册",style: TextStyle(fontWeight: FontWeight.w500,fontSize: 30.sp,color: RC.text1Color,),),SizedBox(height: 6.w),Text("首次验证通过即注册BOSS直聘账号",style: TextStyle(fontWeight: FontWeight.w500,fontSize: 14.sp,color: RC.text2Color,),),SizedBox(height: 10.w),Row(children: [Text("+86",style: TextStyle(fontSize: 16.sp,color: Colors.black,),),Icon(Icons.keyboard_arrow_down,size: 25.w,color: Colors.black.withAlpha(70),),Expanded(child: TextField(controller: logic.controller,keyboardType: TextInputType.phone,inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),],style: TextStyle(color: Colors.black, fontSize: 18.sp),onChanged: (value) {logic.state.phoneNum.value = value;},decoration: InputDecoration(hintText: '请输入您的手机号码',// 设置 hintTexthintStyle: TextStyle(color: Colors.grey, fontSize: 18.sp),// 设置 hintText 的颜色border: InputBorder.none,// 取消底部下划线enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent), // 取消输入框选中时的边框颜色),focusedBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent), // 取消输入框获取焦点时的边框颜色),),),),],),Divider(height: 1.w,color: Colors.grey,),SizedBox(height: 16.w),Obx(() => InkWell(onTap: () {logic.state.isAgree.value = !logic.state.isAgree.value;},child: Row(crossAxisAlignment: CrossAxisAlignment.start,children: [Padding(padding: const EdgeInsets.only(top: 5),child: Icon(logic.state.isAgree.value? Icons.check_circle: Icons.circle_outlined,size: 18.r,color: logic.state.isAgree.value? RC.themeColor: Colors.grey,),),SizedBox(width: 5.w),Expanded(child:RichText(text: TextSpan(text: '已阅读并同意',style: const TextStyle(color: Colors.black, fontSize: 16),children: [TextSpan(text: '《BOSS直聘用户协议》',style: const TextStyle(color: RC.themeColor),recognizer: TapGestureRecognizer()..onTap = () {ToastUtil.show(msg: "跳转到BOSS直聘用户协议");},),const TextSpan(text: ' 和 ',style:TextStyle(color: Colors.black, fontSize: 16),),TextSpan(text: '《隐私政策》',style: const TextStyle(color: RC.themeColor),recognizer: TapGestureRecognizer()..onTap = () {ToastUtil.show(msg: "跳转到隐私政策");},),const TextSpan(text: '，允许BOSS直聘统一管理本人账号信息',style:TextStyle(color: Colors.black, fontSize: 16),),],),),),],),),),Obx(() => InkWell(onTap: () {logic.next(context);},child: Container(height: 50.w,alignment: Alignment.center,margin: EdgeInsets.only(top: 20.w, bottom: 30.w),decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(8.r)),color: logic.state.phoneNum.isNotEmpty? RC.themeColor: RC.themeColor.withAlpha(50)),child: Text("下一步",style: TextStyle(fontSize: 20.sp,fontWeight: FontWeight.w600,color: Colors.white,),),),),),Text("接受不到短信",style: TextStyle(fontSize: 14.sp,color: Colors.grey,),),Expanded(child: Align(alignment: Alignment.bottomCenter,child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.end,children: [Text("或通过以下方式登录",style: TextStyle(fontSize: 14.sp,color: Colors.grey,),),SizedBox(height: 20.w),InkWell(onTap: () {logic.wxLogin();},child: Image.asset(R.login_wx_png,width: 50.w,height: 50.w,),),SizedBox(height: 35.w),Text("服务热线 举报监督电话 资质证照",style: TextStyle(fontSize: 14.sp,color: Colors.grey,),),],),),),],),),);}
}
3. 登录页逻辑

为登录页面创建一个逻辑类，用于处理业务逻辑和状态管理。定义处理用户输入和交互的方法：

// logic.dartimport 'package:flutter/material.dart';
import 'package:get/get.dart';import 'util/toast_util.dart';class LoginLogic extends GetxController {final LoginState state = LoginState();final TextEditingController controller = TextEditingController();void wxLogin() {ToastUtil.show(msg: '微信登录');}void next(BuildContext context) {if (!state.isAgree.value) {showDialog(context: context,builder: (BuildContext context) {return AlertDialog(content: RichText(text: TextSpan(text: '请阅读并同意',style: const TextStyle(color: Colors.black, fontSize: 16),children: [TextSpan(text: '《BOSS直聘用户协议》',style: const TextStyle(color: RC.themeColor),recognizer: TapGestureRecognizer()..onTap = () {ToastUtil.show(msg: "跳转到BOSS直聘用户协议");},),const TextSpan(text: ' 和 ',style: TextStyle(color: Colors.black, fontSize: 16),),TextSpan(text: '《隐私政策》',style: const TextStyle(color: RC.themeColor),recognizer: TapGestureRecognizer()..onTap = () {ToastUtil.show(msg: "跳转到隐私政策");},),const TextSpan(text: '，允许BOSS直聘统一管理本人账号信息',style: TextStyle(color: Colors.black, fontSize: 16),),],),),actions: <Widget>[TextButton(onPressed: () {Navigator.of(context).pop();},child: const Text('拒绝',style: TextStyle(fontSize: 16,color: RC.themeColor,),),),TextButton(onPressed: () {state.isAgree.value = true;Navigator.of(context).pop();},child: const Text('同意',style: TextStyle(fontSize: 16,color: RC.themeColor,),),),],);},);return;}ToastUtil.show(msg: '下一步');}
}class LoginState {RxString phoneNum = "".obs;RxBool isAgree = false.obs;
}
4. 主程序入口

在您的主文件中，将登录页面添加到应用程序的路由中：

// main.dartimport 'package:flutter/material.dart';
import 'package:get/get.dart';import 'login_page.dart';
import 'logic.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(home: LoginPage(),initialBinding: BindingsBuilder(() {Get.lazyPut<LoginLogic>(() => LoginLogic());}),);}
}

结论

通过以上步骤，我们已经完成了Boss登录页面的UI效果。
详情可见：https://github.com/yixiaolunhui/flutter_project

这篇关于Flutter仿Boss-3.登录页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/871480。

相关文章

Security OAuth2 单点登录流程

Security OAuth2 单点登录流程

单点登录（英语：Single sign-on，缩写为 SSO），又译为单一签入，一种对于许多相互关连，但是又是各自独立的软件系统，提供访问控制的属性。当拥有这项属性时，当用户登录时，就可以获取所有系统的访问权限，不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议（LDAP）来实现，在服务器上会将用户信息存储到LDAP数据库中。相同的，单一注销（single sign-off）就是指
阅读更多...
【测试】输入正确用户名和密码，点击登录没有响应的可能性原因

【测试】输入正确用户名和密码，点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题： 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定，导致点击后无法触发登录操作。 页面可能存在
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
Shell脚本实现自动登录服务器

Shell脚本实现自动登录服务器

1.登录脚本 login_server.sh #!/bin/bash# ReferenceLink：https://yq.aliyun.com/articles/516347#show all host infos of serverList.txtif [[ -f ./serverList.txt ]]thenhostNum=`cat ./serverList.txt | wc -l`e
阅读更多...
SpringBoot登录退出|苍穹外卖登录退出分析

SpringBoot登录退出|苍穹外卖登录退出分析

文章目录 概要整体流程注意事项一、拦截路径二、token三、注册防止用户重复提交 苍穹外卖登录退出分析注意解决JWT退出后依然有效的问题 概要 结合Spring Boot和Vue3实现安全的用户登录和退出功能，并使用拦截器、JWT和Redis缓存来提高系统的安全性和性能。 整体流程 注意事项 一、拦截路径 像登录页面的路径就不要拦截了，否则都不能登录了 例如：
阅读更多...
flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题 GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。 最近通过flutter build web，通过发布到GitHu
阅读更多...
Node.js和vue3实现GitHub OAuth第三方登录

Node.js和vue3实现GitHub OAuth第三方登录

Node.js和vue3实现GitHub OAuth第三方登录 前言 第三方登入太常见了，微信，微博，QQ…总有一个你用过。 在开发中，我们希望用户可以通过GitHub账号登录我们的网站，这样用户就不需要注册账号，直接通过GitHub账号登录即可。 效果演示 注册配置 GitHub 应用 1.首先登录你的GitHub然后点击右上角的头像->点击进入Settings页面 2.在
阅读更多...
三方登录 - 华为登录

三方登录 - 华为登录

1.1. 开发准备 当应用需要使用以下开放能力的一种或多种时，为正常调试运行应用，需要预先添加公钥指纹 Account Kit（华为帐号服务）Call Kit（通话服务）Game Service Kit（游戏服务）Health Service Kit（运动健康服务）IAP Kit（应用内支付服务）Live View Kit（实况窗服务，当需要使用Push Kit时必须执行此步骤）Map Kit
阅读更多...
web登录校验

web登录校验

基础登录功能 LoginController @PostMapping("/login")Result login(@RequestBody Emp emp) {log.info("前端，发送了一个登录请求");Emp e = empService.login(emp);return e!=null?Result.success():Result.error("用户" +"名或密码错误");
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2