flutter 写一个登录页面
时间: 2023-10-25 09:23:10 浏览: 97
好的,下面是一个简单的Flutter登录页面的示例:
```dart
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Welcome to My App',
style: TextStyle(fontSize: 24.0),
),
SizedBox(height: 32.0),
Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: TextField(
controller: _usernameController,
decoration: InputDecoration(
hintText: 'Username',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
),
),
SizedBox(height: 16.0),
Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: TextField(
controller: _passwordController,
decoration: InputDecoration(
hintText: 'Password',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
obscureText: true,
),
),
SizedBox(height: 32.0),
RaisedButton(
onPressed: () {
// Here's where you would handle the login logic
final String username = _usernameController.text.trim();
final String password = _passwordController.text.trim();
print('Username: $username');
print('Password: $password');
},
child: Text('Log In'),
),
],
),
),
);
}
}
```
该页面包含一个具有用于键入用户名和密码的文本字段的表单,以及一个登录按钮。当用户点击登录按钮时,您可以在`onPressed`方法中处理登录逻辑,并检查用户名和密码是否正确,或者在后端执行实际的身份验证操作。在此示例中,我们只是将用户名和密码打印到控制台上。
阅读全文