Flutter之撸一个漂亮的登录界面的总结

在Flutter中创建一个漂亮的登录界面，可以使用Material组件和Form组件。以下是一个简化的例子：

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: Card(
          margin: EdgeInsets.all(20.0),
          child: SingleChildScrollView(
            padding: EdgeInsets.all(16.0),
            child: Form(
              key: _formKey,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Email'),
                    validator: (value) {
                      if (value.isEmpty) return 'Enter an email address';
                      if (!value.contains('@')) return 'Email is invalid';
                      return null;
                    },
                    onSaved: (value) => _email = value,
                  ),
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Password'),
                    obscureText: true,
                    validator: (value) {
                      if (value.isEmpty) return 'Enter a password';
                      return null;
                    },
                    onSaved: (value) => _password = value,
                  ),
                  SizedBox(height: 20.0),
                  RaisedButton(
                    child: Text('Login'),
                    onPressed: () {
                      if (_formKey.currentState.validate()) {
                        _formKey.currentState.save();
                        // Handle login
                      }
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个登录页面，包含一个输入邮箱和密码的表单，以及一个登录按钮。使用TextFormField来收集用户输入，并通过Form的validator和onSaved回调进行验证和数据保存。登录按钮在表单验证通过后处理登录逻辑。这个例子展示了如何结合Flutter的Material组件和表单处理逻辑来创建一个现代化的登录界面。