You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

请用Dart语言编写含多登录场景的注册界面代码

Flutter 登录/注册多状态界面实现

以下是满足需求的完整Dart代码(基于Flutter框架),实现了注册、登录、Google快捷登录三种状态的切换及对应功能:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

// 定义界面状态枚举
enum AuthScreenState { login, register, googleAuth }

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const AuthScreen(),
    );
  }
}

class AuthScreen extends StatefulWidget {
  const AuthScreen({super.key});

  @override
  State<AuthScreen> createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  AuthScreenState _currentState = AuthScreenState.login;
  final _formKey = GlobalKey<FormState>();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();
  DateTime? _selectedDob;
  String? _selectedGender;

  // 切换界面状态
  void _switchState(AuthScreenState newState) {
    setState(() {
      _currentState = newState;
      _formKey.currentState?.reset();
      _selectedDob = null;
      _selectedGender = null;
    });
  }

  // 显示日期选择器
  Future<void> _showDatePicker() async {
    final pickedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1900),
      lastDate: DateTime.now(),
    );
    if (pickedDate != null) {
      setState(() {
        _selectedDob = pickedDate;
      });
    }
  }

  // 显示忘记密码对话框
  void _showForgetPasswordDialog() {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('找回密码'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('请选择找回方式:'),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(ctx);
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('已发送验证码到你的手机号')),
                );
              },
              child: const Text('通过手机号找回'),
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(ctx);
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('已发送重置链接到你的邮箱')),
                );
              },
              child: const Text('通过邮箱找回'),
            ),
          ],
        ),
      ),
    );
  }

  // 提交表单(登录/注册/Google登录)
  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      switch (_currentState) {
        case AuthScreenState.login:
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('登录成功!')),
          );
          break;
        case AuthScreenState.register:
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('注册成功!')),
          );
          break;
        case AuthScreenState.googleAuth:
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Google登录成功!')),
          );
          break;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('用户认证')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 顶部切换按钮
            if (_currentState == AuthScreenState.login)
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () => _switchState(AuthScreenState.register),
                    child: const Text('Create an account'),
                  ),
                  const Text(' | '),
                  TextButton(
                    onPressed: () => _switchState(AuthScreenState.googleAuth),
                    child: const Text('Continue with Google'),
                  ),
                ],
              )
            else if (_currentState == AuthScreenState.register)
              TextButton(
                onPressed: () => _switchState(AuthScreenState.login),
                child: const Text('已有账号?登录'),
              )
            else
              TextButton(
                onPressed: () => _switchState(AuthScreenState.login),
                child: const Text('返回普通登录'),
              ),
            const SizedBox(height: 24),
            // 表单区域
            Expanded(
              child: Form(
                key: _formKey,
                child: ListView(
                  children: [
                    // 登录表单
                    if (_currentState == AuthScreenState.login) ...[
                      TextFormField(
                        decoration: const InputDecoration(labelText: '邮箱'),
                        keyboardType: TextInputType.emailAddress,
                        validator: (value) {
                          if (value == null || value.isEmpty || !value.contains('@')) {
                            return '请输入有效的邮箱地址';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        decoration: const InputDecoration(labelText: '密码'),
                        obscureText: true,
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return '请输入密码';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 8),
                      Align(
                        alignment: Alignment.centerRight,
                        child: TextButton(
                          onPressed: _showForgetPasswordDialog,
                          child: const Text('Forget Password'),
                        ),
                      ),
                      const SizedBox(height: 24),
                      ElevatedButton(
                        onPressed: _submitForm,
                        child: const Text('登录'),
                      ),
                    ]
                    // 注册表单
                    else if (_currentState == AuthScreenState.register) ...[
                      TextFormField(
                        decoration: const InputDecoration(labelText: '姓名'),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return '请输入姓名';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        decoration: const InputDecoration(labelText: '电话号码'),
                        keyboardType: TextInputType.phone,
                        validator: (value) {
                          if (value == null || value.isEmpty || value.length < 10) {
                            return '请输入有效的电话号码';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        decoration: const InputDecoration(labelText: '邮箱'),
                        keyboardType: TextInputType.emailAddress,
                        validator: (value) {
                          if (value == null || value.isEmpty || !value.contains('@')) {
                            return '请输入有效的邮箱地址';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      InkWell(
                        onTap: _showDatePicker,
                        child: InputDecorator(
                          decoration: const InputDecoration(labelText: 'DOB(出生日期)'),
                          child: Text(
                            _selectedDob == null
                                ? '请选择日期'
                                : DateFormat('yyyy-MM-dd').format(_selectedDob!),
                          ),
                        ),
                      ),
                      const SizedBox(height: 16),
                      const Text('性别'),
                      Row(
                        children: [
                          Radio<String>(
                            value: 'male',
                            groupValue: _selectedGender,
                            onChanged: (value) {
                              setState(() {
                                _selectedGender = value;
                              });
                            },
                          ),
                          const Text('男'),
                          Radio<String>(
                            value: 'female',
                            groupValue: _selectedGender,
                            onChanged: (value) {
                              setState(() {
                                _selectedGender = value;
                              });
                            },
                          ),
                          const Text('女'),
                        ],
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        decoration: const InputDecoration(labelText: '用户名'),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return '请输入用户名';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        controller: _passwordController,
                        decoration: const InputDecoration(labelText: '密码'),
                        obscureText: true,
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return '请输入密码';
                          }
                          // 验证密码包含普通字符、特殊字符、数字
                          final hasLetter = RegExp(r'[a-zA-Z]').hasMatch(value);
                          final hasNumber = RegExp(r'[0-9]').hasMatch(value);
                          final hasSpecialChar = RegExp(r'[!@#$%^&*(),.?":{}|<>]').hasMatch(value);
                          if (!hasLetter || !hasNumber || !hasSpecialChar) {
                            return '密码需包含字母、数字和特殊字符';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        controller: _confirmPasswordController,
                        decoration: const InputDecoration(labelText: '确认密码'),
                        obscureText: true,
                        validator: (value) {
                          if (value != _passwordController.text) {
                            return '两次输入的密码不一致';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 24),
                      ElevatedButton(
                        onPressed: _submitForm,
                        child: const Text('注册'),
                      ),
                    ]
                    // Google登录表单
                    else ...[
                      TextFormField(
                        decoration: const InputDecoration(labelText: '邮箱'),
                        keyboardType: TextInputType.emailAddress,
                        validator: (value) {
                          if (value == null || value.isEmpty || !value.contains('@')) {
                            return '请输入有效的邮箱地址';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        decoration: const InputDecoration(labelText: '密码'),
                        obscureText: true,
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return '请输入密码';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        decoration: const InputDecoration(labelText: '验证码'),
                        keyboardType: TextInputType.number,
                        validator: (value) {
                          if (value == null || value.isEmpty || value.length != 6) {
                            return '请输入6位验证码';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 24),
                      ElevatedButton(
                        onPressed: _submitForm,
                        child: const Text('Continue with Google'),
                      ),
                    ],
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

功能说明:

  • 状态切换:初始显示登录界面,点击「Create an account」切换到注册表单,点击「Continue with Google」切换到Google登录表单,各表单可返回切换至其他状态。
  • 注册表单:包含姓名、电话、邮箱、出生日期(日期选择器)、性别单选、用户名、密码(带强度验证)、确认密码字段,表单验证通过后显示注册成功提示。
  • 登录表单:包含邮箱、密码输入框,点击「Forget Password」弹出对话框支持手机号/邮箱找回密码,登录验证通过后显示登录成功提示。
  • Google登录表单:包含邮箱、密码、验证码输入框,验证通过后显示登录成功提示。

内容的提问来源于stack exchange,提问作者Sidra Ahmed

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.17 03:17:04