Flutter如何实现表单验证并将数据传递到其他页面展示

• Page2类未预先声明data成员变量，直接在构造函数中对this.data赋值，Dart无法识别未定义的属性，因此抛出setter不存在的错误。
• 你当前传递给Page2的参数是表单的GlobalKey实例，而非用户输入的文本内容，即便解决属性未定义的报错，也无法正常展示用户输入内容。
• 未给TextFormField绑定控制器，无法直接获取用户输入的文本值，另外代码里的RaisedButton已经在新版Flutter中被废弃，建议替换为ElevatedButton。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  const MyForm({Key? key}) : super(key: key);

  @override
  MyFormState createState() {
    return MyFormState();
  }
}


class MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  // 新增输入控制器，用来获取文本框内容
  final TextEditingController _inputController = TextEditingController();

  // 页面销毁时释放控制器，避免内存泄漏
  @override
  void dispose() {
    _inputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextFormField(
              // 绑定控制器
              controller: _inputController,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter some text';
                }
                return null;
              },
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  // 验证通过后拿取文本内容传递给Page2
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Page2(inputText: _inputController.text)),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  // 预先声明接收的参数属性
  final String inputText;
  // 修正构造函数写法，支持参数传递
  const Page2({Key? key, required this.inputText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 展示传递过来的文本内容
            Text(inputText),
            const SizedBox(height: 20),
            // 替换废弃的RaisedButton为ElevatedButton
            ElevatedButton(
              child: const Text('BACK'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者JessciaLau