flutter登录界面
时间: 2023-09-04 17:07:59 浏览: 47
以下是一个简单的Flutter登录界面示例:
```
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String _email;
String _password;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("登录"),
),
body: SafeArea(
child: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "邮箱",
),
validator: (value) {
if (value.isEmpty) {
return "邮箱不能为空";
}
return null;
},
onSaved: (value) {
_email = value;
},
),
SizedBox(height: 16.0),
TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: "密码",
),
validator: (value) {
if (value.isEmpty) {
return "密码不能为空";
}
return null;
},
onSaved: (value) {
_password = value;
},
),
SizedBox(height: 32.0),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
// 在这里执行登录操作
}
},
child: Text("登录"),
),
],
),
),
),
),
);
}
}
```
该界面包含一个带有邮箱和密码输入框以及一个登录按钮的表单。在点击登录按钮时,表单将被验证,如果通过验证,则将执行登录操作。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)