flutter 创建一个 登录按钮
时间: 2023-07-29 13:13:53 浏览: 45
好的,以下是一个基本的登录按钮的创建示例代码:
```dart
ElevatedButton(
onPressed: () {
// 在此处添加登录按钮的点击事件处理逻辑
},
child: Text('登录'),
)
```
你可以根据需要调整按钮的样式和布局,例如:
```dart
Container(
width: 200,
height: 50,
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {
// 在此处添加登录按钮的点击事件处理逻辑
},
style: ElevatedButton.styleFrom(
primary: Colors.blue,
textStyle: TextStyle(fontSize: 20),
),
child: Text('登录'),
),
)
```
这个示例代码中的登录按钮是一个宽度为200,高度为50,蓝色背景,白色文本的按钮,并且设置了20的外边距。你可以根据实际需求进行修改。
相关问题
用flutter 写一个登录页面
好的,我可以回答这个问题。要用 Flutter 写一个登录页面,你需要创建一个新的 Flutter 项目,并在其中添加一个登录页面。你可以使用 Flutter 提供的 Material Design 组件来构建页面,例如 TextField、RaisedButton 等。在登录页面中,你需要添加用户名和密码输入框,以及一个登录按钮。当用户点击登录按钮时,你需要验证用户名和密码是否正确,并根据验证结果跳转到相应的页面。你可以使用 Flutter 提供的 Navigator 组件来实现页面跳转。
flutter写一个登录页
以下是一个简单的Flutter登录页面示例:
```dart
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
String _email;
String _password;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
validator: (value) {
if (value.isEmpty) {
return 'Please enter your email';
}
return null;
},
onSaved: (value) {
_email = value;
},
),
TextFormField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
return null;
},
onSaved: (value) {
_password = value;
},
),
SizedBox(height: 24.0),
RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
// TODO: 实现登录逻辑
}
},
child: Text('Login'),
),
],
),
),
),
);
}
}
```
这个示例中,我们使用了一个`Form`来包装输入框,并使用`TextFormField`来创建一个带有验证和保存功能的输入框。在点击“登录”按钮时,验证表单并调用`onSaved`回调以保存输入值,然后执行登录逻辑。