Flutter 登录页

封面图 • 2026-01-17 • Flutter

在 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` 存储用户信息（如“记住我”）

---

如果你需要更高级的功能（比如动画、响应式设计、网络请求等），也可以告诉我，我可以继续帮你扩展。