flutter登录界面设计,,让人茅塞顿开
在Flutter中设计一个引人入胜的登录界面可以通过组合各种widgets来实现。以下是一个简单的登录界面设计示例:
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
String _email, _password;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/logo.png',
height: 100.0,
),
SizedBox(height: 48.0),
Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
),
validator: (value) {
if (value.isEmpty) return 'Email is required';
if (!value.contains('@')) return 'Invalid email';
return null;
},
onSaved: (value) => _email = value,
),
SizedBox(height: 12.0),
TextFormField(
decoration: InputDecoration(
labelText: 'Password',
),
obscureText: true,
validator: (value) {
if (value.isEmpty) return 'Password is required';
return null;
},
onSaved: (value) => _password = value,
),
SizedBox(height: 12.0),
RaisedButton(
child: Text('Login'),
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
评论已关闭