Flutter TextField 交互实例 —— 新手礼包

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('新手礼包'),
        ),
        body: Center(
          child: NewUserGiftForm(),
        ),
      ),
    );
  }
}
 
class NewUserGiftForm extends StatefulWidget {
  @override
  _NewUserGiftFormState createState() => _NewUserGiftFormState();
}
 
class _NewUserGiftFormState extends State<NewUserGiftForm> {
  final _formKey = GlobalKey<FormState>();
  String _giftContent;
 
  void _submit() {
    if ((_formKey.currentState as FormState).validate()) {
      (_formKey.currentState as FormState).save();
      // 处理提交逻辑，例如保存数据到数据库或执行网络请求等
      Scaffold.of(context).showSnackBar(SnackBar(content: Text('礼包内容：$_giftContent')));
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: '礼包内容'),
            validator: (value) {
              if (value.isEmpty) {
                return '礼包内容不能为空';
              }
              return null;
            },
            onSaved: (value) => _giftContent = value,
          ),
          RaisedButton(
            child: Text('提交'),
            onPressed: _submit,
          ),
        ],
      ),
    );
  }
}

这段代码展示了如何在Flutter中创建一个简单的表单，用户可以在其中输入新手礼包的内容，并通过一个RaisedButton来提交这些内容。如果输入的内容非空，则会显示一个包含输入内容的SnackBar。这个例子教会了如何使用Form、TextFormField和表单的验证以及保存机制。