Flutter框架实现登录注册功能,不连接数据库

要在Flutter框架中实现登录和注册功能,而不连接数据库,可以使用本地存储来存储用户信息。以下是一个简单的示例,演示如何使用本地存储来实现登录和注册功能。

首先,我们需要添加 shared_preferences 插件到 pubspec.yaml 文件中:

dependencies:flutter:sdk: fluttershared_preferences: ^0.5.13+4

然后,在 lib 文件夹中创建一个新的文件夹 models,并在其中创建一个名为 user.dart 的文件。在 user.dart 文件中,定义一个简单的 User 类,用于表示用户信息:

class User {final String username;final String password;User({required this.username, required this.password});
}

接下来,我们将在 lib 文件夹中创建一个名为 utils.dart 的文件,在其中定义一些工具函数。首先,我们将创建一个函数来保存用户信息到本地存储:

import 'package:shared_preferences/shared_preferences.dart';
import 'package:your_app_name/models/user.dart';class Utils {static Future<void> saveUser(User user) async {final prefs = await SharedPreferences.getInstance();await prefs.setString('username', user.username);await prefs.setString('password', user.password);}
}

然后,我们将创建一个函数来从本地存储中获取保存的用户信息:

class Utils {// ...static Future<User?> getUser() async {final prefs = await SharedPreferences.getInstance();final username = prefs.getString('username');final password = prefs.getString('password');if (username != null && password != null) {return User(username: username, password: password);}return null;}
}

现在,我们将在 lib 文件夹中创建一个名为 login.dart 的文件,在其中实现登录功能。首先,我们将创建一个简单的登录表单:

import 'package:flutter/material.dart';
import 'package:your_app_name/models/user.dart';
import 'package:your_app_name/utils.dart';class LoginScreen extends StatefulWidget {_LoginScreenState createState() => _LoginScreenState();
}class _LoginScreenState extends State<LoginScreen> {final _formKey = GlobalKey<FormState>();String _username = '';String _password = '';Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Login'),),body: Padding(padding: EdgeInsets.all(16.0),child: Form(key: _formKey,child: Column(children: [TextFormField(decoration: InputDecoration(labelText: 'Username'),validator: (value) {if (value == null || value.isEmpty) {return 'Please enter your username';}return null;},onSaved: (value) => _username = value!,),TextFormField(decoration: InputDecoration(labelText: 'Password'),obscureText: true,validator: (value) {if (value == null || value.isEmpty) {return 'Please enter your password';}return null;},onSaved: (value) => _password = value!,),SizedBox(height: 16.0),ElevatedButton(onPressed: () {if (_formKey.currentState!.validate()) {_formKey.currentState!.save();_login();}},child: Text('Login'),),],),),),);}void _login() async {final user = await Utils.getUser();if (user != null && user.username == _username && user.password == _password) {// 登录成功showDialog(context: context,builder: (BuildContext context) {return AlertDialog(title: Text('Success'),content: Text('Logged in successfully'),actions: [TextButton(child: Text('OK'),onPressed: () {Navigator.of(context).pop();},),],);},);} else {// 登录失败showDialog(context: context,builder: (BuildContext context) {return AlertDialog(title: Text('Error'),content: Text('Invalid credentials'),actions: [TextButton(child: Text('OK'),onPressed: () {Navigator.of(context).pop();},),],);},);}}
}

然后,我们将在 lib 文件夹中创建一个名为 register.dart 的文件,在其中实现注册功能。类似地,我们将创建一个简单的注册表单:

import 'package:flutter/material.dart';
import 'package:your_app_name/models/user.dart';
import 'package:your_app_name/utils.dart';class RegisterScreen extends StatefulWidget {_RegisterScreenState createState() => _RegisterScreenState();
}class _RegisterScreenState extends State<RegisterScreen> {final _formKey = GlobalKey<FormState>();String _username = '';String _password = '';Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Register'),),body: Padding(padding: EdgeInsets.all(16.0),child: Form(key: _formKey,child: Column(children: [TextFormField(decoration: InputDecoration(labelText: 'Username'),validator: (value) {if (value == null || value.isEmpty) {return 'Please enter your username';}return null;},onSaved: (value) => _username = value!,),TextFormField(decoration: InputDecoration(labelText: 'Password'),obscureText: true,validator: (value) {if (value == null || value.isEmpty) {return 'Please enter your password';}return null;},onSaved: (value) => _password = value!,),SizedBox(height: 16.0),ElevatedButton(onPressed: () {if (_formKey.currentState!.validate()) {_formKey.currentState!.save();_register();}},child: Text('Register'),),],),),),);}void _register() async {final newUser = User(username: _username, password: _password);await Utils.saveUser(newUser);showDialog(context: context,builder: (BuildContext context) {return AlertDialog(title: Text('Success'),content: Text('Registered successfully'),actions: [TextButton(child: Text('OK'),onPressed: () {Navigator.of(context).pop();Navigator.of(context).pop(); // 返回登录页面},),],);},);}
}

最后,在 lib 文件夹中的 main.dart 文件中,我们将创建一个简单的登陆注册示例应用,包含一个首页和两个路由:/login/register。用户可以从首页导航到登录和注册页面:

import 'package:flutter/material.dart';
import 'package:your_app_name/login.dart';
import 'package:your_app_name/register.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(title: 'Login & Register Demo',theme: ThemeData(primarySwatch: Colors.blue,),initialRoute: '/',routes: {'/': (context) => HomeScreen(),'/login': (context) => LoginScreen(),'/register': (context) => RegisterScreen(),},);}
}class HomeScreen extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/login');},child: Text('Login'),),ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/register');},child: Text('Register'),),],),),);}
}

通过在 main.dart 中定义的初始路由和 routes,我们可以在各个页面之间进行导航。用户可以从首页进入登录页面完成登录,或者从首页进入注册页面完成注册。

这只是一个简单的示例,演示如何在Flutter框架中实现登录和注册功能,而不连接数据库。实际应用中,您可能需要更完整和复杂的解决方案来处理更多的用户信息和功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/126753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nginx 转发数据流文件

1.问题描述 后端服务&#xff0c;从数据库中查询日志&#xff0c;并生成表格文件返回静态文件。当数据量几兆时&#xff0c;返回正常&#xff0c;但是超过几十兆&#xff0c;几百兆&#xff0c;就会超过网关的连接超时时间30秒。 时序图 这里面主要花费时间的地方在&#xff…

从零开始的目标检测和关键点检测(二):训练一个Glue的RTMDet模型

从零开始的目标检测和关键点检测&#xff08;二&#xff09;&#xff1a;训练一个Glue的RTMDet模型 一、config文件解读二、开始训练三、数据集分析四、ncnn部署 从零开始的目标检测和关键点检测&#xff08;一&#xff09;&#xff1a;用labelme标注数据集 从零开始的目标检测…

领先实践|IDEO 最佳设计思维和策略框架

设计思维是一种以人为本的创新方法&#xff0c;它从人类的角度出发&#xff0c;考虑技术上可行和经济上可行的内容。框架可以成为实现设计思维、策略和系统设计的有用工具。本文由此展开阐述 IDEO 的最佳设计思维和策略框架。 01. 设计思维框架 1.1 设计思维过程 设计思维?是…

python3 阿里云api进行巡检发送邮件

python3 脚本爬取阿里云进行巡检 不确定pip能不能安装上&#xff0c;使用时候可以百度一下&#xff0c;脚本是可以使用的&#xff0c;没有问题的 太长时间了&#xff0c;pip安装依赖忘记那些了&#xff0c;使用科大星火询问了下&#xff0c;给了下面的&#xff0c;看看能不能使…

一行代码搞定禁用web开发者工具

在如今的互联网时代&#xff0c;网页源码的保护显得尤为重要&#xff0c;特别是前端代码&#xff0c;几乎就是明文展示&#xff0c;很容易造成源码泄露&#xff0c;黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的Web开发者工具…

X64(64位)汇编指令与机器码转换原理

X64&#xff08;64位&#xff09;汇编指令与机器码转换原理 1 64位寻址形式下的ModR/M字节1.1 寻址方式1.2 寄存器编号 2 汇编指令转机器码2.1 mov rcx, 1122334455667788h2.2 mov rcx,[r8]与mov [r8],rcx2.3 mov rcx,[r8r9*2] 本文属于《 X86指令基础系列教程》之一&#xff…

HPE Compute Scale-up Server 3200服务器来了!突破算力瓶颈,护航企业数字化转型

在全球数字化步入深水区的同时&#xff0c;伴随AIGC的迅速发展&#xff0c;对计算需求的迅速增长&#xff0c;如何高效灵活地使用算力资源成为开发者和企业发展的关注焦点。 服务器作为重要的算力基础设施之一&#xff0c;能快速处理大量数据&#xff0c;在AI时代其市场价值愈…

网络安全方向相关课题和材料

项目介绍 搜集大量网络安全行业开源项目 项目收集的思路: 一个是关注互联网企业/团队的安全开源项目,经企业内部实践,这些最佳实践值得借鉴。 一个是来自企业安全能力建设的需求,根据需求分类,如WAF、HIDS、Git监控等。 这个收集是一个长期的过程,我在GitHub创建了这…

9.MySQL索引的操作

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 索引操作 查询索引 创建主键索引 唯一索引的创建 普通索引的创建 全文索引的创建 删除索引 索引创建原则 索引操作 查询索引 第一种方法&#xff1a; show keys from 表名\G 我们了解其中几个就好。 第二种方法…

双目视觉检测 KX02-SY1000型测宽仪 有效修正和消除距离变化对测量的影响

双目视觉检测的基本原理 利用相机测量宽度时&#xff0c;由于单个相机在成像时存在“近大远小”的现象&#xff0c;并且单靠摄入的图像无法知道被测物的距离&#xff0c;所以由被测物的跳动导致的被测物到工业相机之间距离变化&#xff0c;使测量精度难以提高。 因此测宽仪需…

项目综合实训,vrrp+bfd,以及策略路由的应用

目录 一&#xff0e; 项目需求 二&#xff0e; Visio设备画图 三&#xff0e; 设备选型 三&#xff0e;vlan规划 四&#xff0e;Ip地址规划 五&#xff0e;实验拓扑图 六&#xff0e;配置过程及结果 项目需求 1.S1作为VLAN10的主网关和根桥&#xff0c;S2作为v…

【C语法学习】5 - fputc()函数

文章目录 1 函数原型2 参数3 返回值4 示例4.1 示例14.2 示例24.3 示例3 1 函数原型 fputc()&#xff1a;将一个字符发送至指定流stream&#xff0c;函数原型如下&#xff1a; int fputc(int c, FILE *stream);2 参数 fputc()函数有两个参数c和stream&#xff1a; 参数c是待…

【JAVA学习笔记】 56 - 开发中如何选择集合实现类,以及Collection工具类

项目代码 https://github.com/yinhai1114/Java_Learning_Code/blob/main/IDEA_Chapter14/src/com/yinhai/Collections_.java 在开发中&#xff0c;选择什么集合实现类&#xff0c;主要取决于业务操作特点&#xff0c;然后根据集合实现类特性进行 选择&#xff0c;分析如下: 0.…

npm工具使用方法介绍

npm 使用方法 文章目录 npm 使用方法安装 npm初始化项目安装依赖更新依赖卸载依赖发布包其他命令下载相关 npm 是 Node.js 的包管理工具&#xff0c;用于管理 Node.js 项目的依赖关系。npm 提供了丰富的命令和功能&#xff0c;可以帮助开发者快速构建和部署 Node.js 应用程序。…

Servlet

Servlet是运行在服务端的小型Java程序&#xff0c;是sun公司提供一套规范&#xff0c;用来处理客户端请求&#xff0c;响应给浏览器的动态资源。但servlet的实质就是Java代码&#xff0c;通过Java的API动态的向客户端输出内容&#xff08;HTML&#xff09; 一、使用servlet2.5实…

量化交易Copula建模应对市场低迷

一、简介 传统上,我们依靠相关矩阵来理解资产间的动态。然而,正如过去的市场崩盘所表明的那样,当风暴袭来时,许多模型都会陷入混乱。突然之间,相关性似乎趋于一致,而多样化这一经常被吹捧的风险管理口号似乎并没有提供什么庇护。 这种出乎意料的同步,即资产在经济低迷时…

虹科分享 | 太赫兹成像技术透视分层结构助力文物研究

文章来源&#xff1a;虹科光电Hophotonix 阅读链接&#xff1a;虹科分享 | 太赫兹成像技术透视分层结构助力文物研究 对于时间分辨成像方法来说&#xff0c;分层结构的无创检测具有挑战性&#xff0c;其中分辨率和对比度可能会因层间反射和色散的突出信号衰减而受到影响。在一…

【Java 进阶篇】Java Response 输出字符数据案例

在Java Web开发中&#xff0c;使用HTTP响应对象&#xff08;Response&#xff09;来向客户端发送数据是一项非常重要的任务。本篇博客将详细介绍如何使用Java中的Response对象来输出字符数据&#xff0c;并提供示例代码以帮助读者更好地理解和应用这一概念。不仅将讨论基础知识…

Redis 原理缓存过期、一致性hash、雪崩、穿透、并发、布隆、缓存更新策略、缓存数据库一致性

redis过期策略 redis的过期策略可以通过配置文件进行配置 一、定期删除 redis会把设置了过期时间的key放在单独的字典中&#xff0c;定时遍历来删除到期的key。 1&#xff09;.每100ms从过期字典中 随机挑选20个&#xff0c;把其中过期的key删除&#xff1b; 2&#xff09;.…

前端食堂技术周刊第 102 期:Next.js 14、Yarn 4.0、State of HTML、SEO 从 0 到 1

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;肥牛宽粉 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…