下面是一个简单的Flutter登录注册界面的示例代码，您可以根据自己的需求进行修改和扩展。
```dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Login Demo',
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;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Page'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter your email';
}
return null;
},
decoration: InputDecoration(
labelText: 'Email',
),
onSaved: (value) {
email = value;
},
),
TextFormField(
obscureText: true,
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
return null;
},
decoration: InputDecoration(
labelText: 'Password',
),
onSaved: (value) {
password = value;
},
),
SizedBox(
height: 16.0,
),
Center(
child: RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
// Do something with email and password
print('Email: $email');
print('Password: $password');
}
},
child: Text('Login'),
),
),
SizedBox(
height: 16.0,
),
Center(
child: GestureDetector(
onTap: () {
// Navigate to registration page
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegistrationPage(),
),
);
},
child: Text(
'Don\'t have an account? Register now!',
style: TextStyle(
color: Colors.blue,
),
),
),
),
],
),
),
),
);
}
}
class RegistrationPage extends StatefulWidget {
@override
_RegistrationPageState createState() => _RegistrationPageState();
}
class _RegistrationPageState extends State<RegistrationPage> {
final _formKey = GlobalKey<FormState>();
String name;
String email;
String password;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Registration Page'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter your name';
}
return null;
},
decoration: InputDecoration(
labelText: 'Name',
),
onSaved: (value) {
name = value;
},
),
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter your email';
}
return null;
},
decoration: InputDecoration(
labelText: 'Email',
),
onSaved: (value) {
email = value;
},
),
TextFormField(
obscureText: true,
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
return null;
},
decoration: InputDecoration(
labelText: 'Password',
),
onSaved: (value) {
password = value;
},
),
SizedBox(
height: 16.0,
),
Center(
child: RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
// Do something with name, email and password
print('Name: $name');
print('Email: $email');
print('Password: $password');
}
},
child: Text('Register'),
),
),
],
),
),
),
);
}
}
```
在上面的代码中，我们创建了两个页面：`LoginPage`和`RegistrationPage`。在`LoginPage`中，我们使用了`TextFormField`小部件来获取用户输入的电子邮件和密码，以及一个`RaisedButton`在提交表单时触发的登录操作。如果用户没有帐户，他们可以点击“没有帐户？现在注册！”链接，然后导航到`RegistrationPage`。
在`RegistrationPage`中，我们使用了三个`TextFormField`小部件来获取用户输入的名称、电子邮件和密码，并使用一个`RaisedButton`在提交表单时触发注册操作。
您可以在这个示例代码的基础上进行修改和扩展，以满足您的具体需求。
1211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
