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

無言462023-10-29 21:27

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

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

yaml 复制代码 
dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^0.5.13+4

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

dart 复制代码 
class User {
  final String username;
  final String password;

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

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

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);
  }
}

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

dart 复制代码 
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 的文件，在其中实现登录功能。首先，我们将创建一个简单的登录表单：

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 {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  String _username = '';
  String _password = '';

  @override
  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 的文件，在其中实现注册功能。类似地，我们将创建一个简单的注册表单：

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 {
  @override
  _RegisterScreenState createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final _formKey = GlobalKey<FormState>();
  String _username = '';
  String _password = '';

  @override
  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。用户可以从首页导航到登录和注册页面：

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

相关推荐
万少4 小时前
用腻了 WorkBuddy 的默认界面？这个开源小工具给它换上了毛玻璃
前端·javascript·后端
To_OC5 小时前
LC 15 三数之和：双指针不难，难的是把去重做对
javascript·算法·leetcode
想你依然心痛6 小时前
【共创季稿事节】HarmonyOS 7.0 应用框架（ArkUI-X）跨平台能力深度探索
flutter·react native·arkui-x·跨平台渲染·harmonyos 7.0·arkrender·组件兼容性
触底反弹6 小时前
🔥 前端也能玩转 AI 流式输出！从二进制流到打字机效果，一篇讲透
javascript·人工智能·node.js
胡萝卜术6 小时前
深度重构：Agent Skills——从 Prompt 工程到能力工程
javascript·架构·github
踏月的造梦星球7 小时前
DMDPC 学习：架构、部署、运维与调优
运维·数据库·学习·架构
韩楚风7 小时前
【参天引擎】事务生命周期 / MVCC / Undo / ACID / 分布式事务 功能域整体解析
数据库·分布式·mysql·架构·cantian
renhongxia18 小时前
世界模型，是“空中楼阁”还是AGI的“最后一块拼图”？
运维·服务器·数据库·人工智能·算法·agi
程序员无隅8 小时前
Coding Agent 为什么压缩上下文后还能继续工作？上下文模块设计拆解
java·开发语言·数据库
愿做无知一猿8 小时前
Nacos连接MySQL异常？DataGrip竟成救星
数据库·mysql
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03AI科技热点日报 | 2026年07月01日04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07Codex 下载安装指南：Windows 和 macOS 官方版下载082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战10几个好用的ip纯净度检测网站