Flutter 登录页
封面图
•
2025-09-27
•
Flutter
42
0
0
0
在 Flutter 中创建一个登录页是一个常见的任务,通常包括以下元素: - 用户名输入框(TextField) - 密码输入框(TextField,类型为 `obscureText`) - 登录按钮 - 可选的“记住我”复选框 - “忘记密码?”链接 下面是一个简单的 Flutter 登录页面示例代码: --- ### ✅ 示例:Flutter 登录页(使用 `StatefulWidget`) ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Login Page', theme: ThemeData( primarySwatch: Colors.blue, ), home: LoginPage(), ); } } class LoginPage extends StatefulWidget { @override _LoginPageState createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { final _formKey = GlobalKey<FormState>(); String? _email; String? _password; void _login() { if (_formKey.currentState!.validate()) { // 提交表单逻辑 print('Email: $_email, Password: $_password'); // 这里可以添加登录逻辑,如调用 API } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Login'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Form( key: _formKey, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ TextFormField( decoration: InputDecoration(labelText: 'Email'), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter your email'; } return null; }, onSaved: (value) { _email = value; }, ), SizedBox(height: 16), 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: 24), ElevatedButton( onPressed: _login, child: Text('Login'), ), SizedBox(height: 16), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () { // 忘记密码逻辑 }, child: Text('Forgot Password?'), ), ], ), ], ), ), ), ); } } ``` --- ### 📝 说明: - 使用了 `Form` 和 `TextFormField` 来进行表单验证。 - `_formKey` 用于验证表单是否有效。 - `onPressed` 是登录按钮点击事件,你可以在这里处理登录逻辑(比如调用 API)。 - `obscureText: true` 用于隐藏密码。 --- ### 🛠 可扩展功能建议: - 添加“记住我”复选框 - 添加社交登录按钮(如 Google、Facebook) - 实现错误提示(如用户名或密码错误) - 使用 `Provider` 或 `Riverpod` 管理状态 - 使用 `SharedPreferences` 存储用户信息(如“记住我”) --- 如果你需要更高级的功能(比如动画、响应式设计、网络请求等),也可以告诉我,我可以继续帮你扩展。
上一篇:
Flutter 多语言和多主题
下一篇:
Flutter APP代码结构
标题录入,一次不能超过6条
留言
评论