Flutter技术问询：如何将DropdownMenu与DatePicker值填入TextFormField后展示

要实现选择DropdownMenu或DatePicker后将值填入TextFormField，核心是通过TextEditingController控制输入框内容，在选择操作完成后直接将值同步到输入框中，具体实现如下：

关键修改点 #

• 添加输入控制器：在MyHomePageState中创建TextEditingController并绑定到TextFormField，用于直接操控输入框文本内容。
• Dropdown选择同步：在Dropdown的onChanged回调中，选择值后立即将值赋值给控制器的text属性，同时更新Controller中的选中状态。
• DatePicker选择同步：修改Controller中的日期选择方法，让它返回选中的日期，在日历图标点击回调中，将返回的日期字符串赋值给控制器。
• 保留手动输入同步：TextFormField的onChanged回调保留，确保手动输入的内容能同步到Controller的状态中。

修改后完整代码 #

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() async {
  Get.put(SpringTesterController());
  runApp(const GetMaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GetBuilder<SpringTesterController>(
            init: SpringTesterController(),
            builder: (gtxs1) {
              return const MyHomePage();
            }),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SpringTesterController>(
        init: SpringTesterController(),
        builder: (gtxs1) {
          return Column(
            children: [
              Row(
                children: [
                  const Text(
                    'Name:',
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w500,
                      color: Colors.blue,
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Text(
                    gtxs1.displayedValue,
                    style: const TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFFEF6C00),
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  IconButton(
                    icon: const Icon(
                      Icons.calendar_month_outlined,
                    ),
                    onPressed: () async {
                      await gtxs1.selectDate(context).then((selectedDate) {
                        textController.text = selectedDate.toString();
                      });
                    },
                  ),
                  DropdownButton(
                    value: gtxs1.selectedValue,
                    onChanged: (value) {
                      gtxs1.onSelectedDropdown(value.toString());
                      textController.text = value.toString();
                    },
                    items: const [
                      DropdownMenuItem(
                        value: '1',
                        child: Text('1'),
                      ),
                      DropdownMenuItem(
                        value: '2',
                        child: Text('2'),
                      ),
                      DropdownMenuItem(
                        value: '3',
                        child: Text('3'),
                      ),
                      DropdownMenuItem(
                        value: '4',
                        child: Text('4'),
                      ),
                    ],
                  ),
                ],
              ),
              Form(
                key: _formKey,
                child: Row(
                  children: [
                    SizedBox(
                      height: 40,
                      width: 250,
                      child: TextFormField(
                        onChanged: gtxs1.onTextFieldChanged,
                        controller: textController,
                      ),
                    ),
                    IconButton(
                      icon: const Icon(
                        Icons.save,
                      ),
                      onPressed: () {
                        gtxs1.setName();
                      },
                    ),
                  ],
                ),
              ),
            ],
          );
        });
  }
}


class SpringTesterController extends GetxController {
  static SpringTesterController get to => Get.find();
  String? selectedValue;
  String enteredValue = '';
  String displayedValue = '';
  DateTime _selectedDate = DateTime.now();

  void onSelectedDropdown(String newValue) {
    selectedValue = newValue;
    update();
  }

  void onTextFieldChanged(String newValue) {
    enteredValue = newValue;
    update();
  }

  void setName() {
    if (enteredValue.isNotEmpty) {
      displayedValue = enteredValue;
    } else {
      if (selectedValue != null) {
        displayedValue = '${selectedValue!} $_selectedDate';
      } else {
        displayedValue = _selectedDate.toString();
      }
    }
    update();
  }

  Future<DateTime> selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: _selectedDate,
      firstDate: DateTime(2015),
      lastDate: DateTime(2101),
    );
    if (picked != null && picked != _selectedDate) {
      _selectedDate = picked;
    }
    update();
    return _selectedDate;
  }
}

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