当前位置: 首页 > news >正文

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框架中实现登录和注册功能,而不连接数据库。实际应用中,您可能需要更完整和复杂的解决方案来处理更多的用户信息和功能。

相关文章:

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

要在Flutter框架中实现登录和注册功能&#xff0c;而不连接数据库&#xff0c;可以使用本地存储来存储用户信息。以下是一个简单的示例&#xff0c;演示如何使用本地存储来实现登录和注册功能。 首先&#xff0c;我们需要添加 shared_preferences 插件到 pubspec.yaml 文件中&…...

持续集成部署-k8s-部署利器-Helm

这里写目录标题 1. Helm 是什么?2. 快速安装 Helm2.1 前置条件2.2 Helm 版本与 K8s 版本对应关系2.3 离线安装 Helm3. Helm 常用命令1. Helm 是什么? Helm 是一个用于 Kubernetes 应用程序部署和管理的开源工具。它可以帮助简化 Kubernetes 应用程序的打包、发布、配置和升级…...

替换所有的问号

这篇也是凑数的 哈哈.... 稍后会整合到算法通关第三关白银挑战 . 描述 : 给你一个仅包含小写英文字母和 ? 字符的字符串 s&#xff0c;请你将所有的 ? 转换为若干小写字母&#xff0c;使最终的字符串不包含任何 连续重复 的字符。 注意 : 不能 修改非 ? 字符 . 题目 : …...

NCCL后端

"NCCL" 代表 "NVIDIA Collective Communications Library"&#xff0c;"NVIDIA 集体通信库"&#xff0c;它是一种由 NVIDIA 开发的用于高性能计算的通信库。NCCL 专门设计用于加速 GPU 群集之间的通信&#xff0c;以便在并行计算和深度学习等领域…...

【API篇】十、生成Flink水位线

文章目录 1、水位线的生成原则2、有序流内置水位线3、乱序流内置水位线4、自定义周期性水位线生成器5、自定义断点式水位线生成器6、从数据源中发送水位线 1、水位线的生成原则 水位线出现&#xff0c;即代表这个时间之前的数据已经全部到齐&#xff0c;之后不会再出现之前的数…...

【Javascript】弹出框

目录 警告框 确认框 提示框 警告框 alert(你好); 确认框 var isConfirm confirm(请确认) console.log( isConfirm); 提示框...

NSS [鹤城杯 2021]EasyP

NSS [鹤城杯 2021]EasyP 直接给了源码 <?php include utils.php;if (isset($_POST[guess])) {$guess (string) $_POST[guess];if ($guess $secret) {$message Congratulations! The flag is: . $flag;} else {$message Wrong. Try Again;} }if (preg_match(/utils\.p…...

mysql用户及权限管理(InsCode AI 创作助手)

MySQL是一个广泛使用的开源关系型数据库管理系统&#xff0c;用于存储和管理大量数据。对于那些需要使用MySQL的管理员和开发人员来说&#xff0c;用户权限管理是确保数据库安全性的至关重要的一环。在本篇技术博客中&#xff0c;我们将深入探讨MySQL的用户权限管理&#xff0c…...

命令模式——让程序舒畅执行

● 命令模式介绍 命令模式&#xff08;Command Pattern&#xff09;&#xff0c;是行为型设计模式之一。命令模式相对于其他的设计模式来说并没有那么多条条框框&#xff0c;其实并不是一个很“规矩”的模式&#xff0c;不过&#xff0c;就是基于一点&#xff0c;命令模式相对于…...

GZ035 5G组网与运维赛题第3套

2023年全国职业院校技能大赛 GZ035 5G组网与运维赛项&#xff08;高职组&#xff09; 赛题第3套 一、竞赛须知 1.竞赛内容分布 竞赛模块1--5G公共网络规划部署与开通&#xff08;35分&#xff09; 子任务1&#xff1a;5G公共网络部署与调试&#xff08;15分&#xff09; 子…...

071:mapboxGL上传含shp的zip文件,在map上解析显示图形

第071个 点击查看专栏目录 本示例是介绍演示如何在vue+mapbox中上传含有shp文件的zip,在地图上显示图形。这里先通过上传解压解析,转换生成geojson文件,然后在地图上渲染图形。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果所用的zip文…...

python下拉框选择测试

把下拉选择的值得打印出来&#xff1a; import tkinter as tk def on_select(event): # 当选择下拉框中的一项时&#xff0c;此函数将被调用 selected event.widget.cget("text") # 获取选中的文本 print(f"You selected: {selected}") # 打印选中…...

即时编译器JIT

类编译加载执行过程 如下图所示&#xff0c;一个Java代码从编译到运行大抵会经历以下几个过程。具体每个过程笔者会在下文站展开讨论。 类编译 首先是类编译阶段&#xff0c;这个阶段会将Java文件变为class文件&#xff0c;这个class文件包含一个常量池和方法表集合&#xf…...

npm更新包时This operation requires a one-time password.

[访问我的npm包](mhfwork/yt-ui - npm) 更新npm包时出现 This operation requires a one-time password.是因为需要认证 解决办法 1. 点击红线处的链接 2. 进入npm官网获取指定秘钥 3. 再次填入 one-time password 即可...

C++类模板再学习

之前已经学习了C类模板&#xff1b;类模板的写法和一般类的写法有很大的差别&#xff1b;不容易熟悉&#xff1b;下面再做一遍&#xff1b; 做一个椭圆类&#xff0c;成员有长轴长度和短轴长度&#xff1b; // ellipse.h: interface for the ellipse class. // //#if !define…...

华为终端智能家居应用方案

PLC-IoT概述 华为智能PLC-IoT工业物联网系列通信模块是基于电力线宽带载波技术的产品&#xff0c;实现数据在电力线上双向、高速、稳定的传输&#xff0c;广泛适用于电力、交通、工业制造、智能家居等领域&#xff0c;PLC-IoT通信模块包含头端和尾端两种类型&#xff0c;头端配…...

PHP下载文件

/***文件下载*param $filepath源文件路径 */function dwon_file($filepath){if(file_exists($filepath)){header(content-type:text/html;charsetutf8);header(Content-Description: File Transfer);header(Content-Type: application/octet-stream);header(Content-Dispositio…...

38基于matlab的期货预测,利用PSO优化SVM和未优化的SVM进行对比,得到实际输出和期望输出结果。

基于matlab的期货预测&#xff0c;利用PSO优化SVM和未优化的SVM进行对比&#xff0c;得到实际输出和期望输出结果。线性核函数、多项式、RBF核函数三种核函数任意可选&#xff0c;并给出均方根误差&#xff0c;相对误差等结果&#xff0c;程序已调通&#xff0c;可直接运行。 3…...

【Codeforces】 CF582D Number of Binominal Coefficients

题目链接 CF方向 Luogu方向 题目解法 看到 p α ∣ ( n k ) p^{\alpha} | \binom{n}{k} pα∣(kn​) &#xff0c;首先想到 k u m m e r kummer kummer 定理&#xff0c;那么限制即为 n − k n-k n−k 和 k k k 做加法在 p p p 进制下的进位数 ≥ α \ge \alpha ≥α …...

sql第二次上机作业

1查找借阅了ISBN为“4-6045-1023-4”的借书证号&#xff0c;读者姓名&#xff0c;专业名和借书时间 use tsgl go select Reader.Lno,Rname,Spec,Lend.Bordate FROM Reader,Lend WHERE Reader.LnoLend.Lno AND ISBN 4-6045-1023-42查找借阅了《数据库原理》一书的借阅信息&…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

归并排序:分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...