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>();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              TextFormField(
                controller: _usernameController,
                decoration: InputDecoration(
                  labelText: '用户名',
                  hintText: '请输入用户名',
                ),
                validator: (value) {
                  if (value.isEmpty) {
                    return '用户名不能为空';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _passwordController,
                decoration: InputDecoration(
                  labelText: '密码',
                  hintText: '请输入密码',
                ),
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty) {
                    return '密码不能为空';
                  }
                  return null;
                },
              ),
              RaisedButton(
                child: Text('登录'),
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    // 登录逻辑
                    print('登录逻辑');
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
 
  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }
}

这段代码展示了如何在Flutter中创建一个简单的登录页面，包括用户名和密码的输入，以及一个登录按钮。使用了Form控件来管理输入数据的验证，并且使用TextFormField来收集用户输入的信息。当用户点击登录按钮时，会触发表单验证，如果验证通过，会执行登录逻辑（在这里是打印一条消息）。这个例子简洁明了，并且教会了如何处理用户输入数据的验证。