关于Flutter Material下拉列表文本框的实现示例咨询

刚接触Flutter的话，确实容易在官方文档里找不到这类组合组件的直接示例，我来给你分享几个实用的实现方案——不管你要的是点击弹出选择的只读下拉文本框，还是支持输入+下拉提示的组件，这里都有对应的代码示例：

1. 只读下拉选择文本框（类似原生Spinner） #

这种组件点击文本框会弹出下拉选项，选择后填充到文本框中，文本框本身不可编辑，适合不需要手动输入、只能选择预设选项的场景。

import 'package:flutter/material.dart';

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

  @override
  State<DropdownTextField> createState() => _DropdownTextFieldState();
}

class _DropdownTextFieldState extends State<DropdownTextField> {
  // 预设选项列表
  final List<String> _options = ['选项1', '选项2', '选项3', '选项4'];
  // 存储选中的值
  String? _selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('下拉选择文本框示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          // 设置为只读，禁止手动输入
          readOnly: true,
          decoration: InputDecoration(
            labelText: '选择一个选项',
            border: const OutlineInputBorder(),
            // 右侧添加下拉箭头图标，提升交互辨识度
            suffixIcon: const Icon(Icons.arrow_drop_down),
          ),
          // 点击文本框时弹出底部选择菜单
          onTap: () {
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return ListView.builder(
                  shrinkWrap: true,
                  itemCount: _options.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(_options[index]),
                      // 给选中的选项添加对勾标记
                      trailing: _selectedValue == _options[index]
                          ? const Icon(Icons.check, color: Colors.blue)
                          : null,
                      onTap: () {
                        setState(() {
                          _selectedValue = _options[index];
                        });
                        Navigator.pop(context);
                      },
                    );
                  },
                );
              },
            );
          },
          // 通过控制器绑定选中的值，实时更新文本框显示内容
          controller: TextEditingController(text: _selectedValue),
        ),
      ),
    );
  }
}

关键细节说明： #

• readOnly: true 确保文本框只能触发点击事件，无法手动输入
• 用showModalBottomSheet弹出选项列表，你也可以换成showDialog实现弹窗式选择
• 通过TextEditingController同步选中值和文本框显示内容

2. 可输入+下拉提示的文本框（类似AutoComplete） #

这种组件允许用户手动输入内容，同时实时过滤并显示匹配的预设选项，选择后自动填充到文本框，适合需要灵活输入+快速选择的场景。

import 'package:flutter/material.dart';

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

  @override
  State<AutocompleteTextField> createState() => _AutocompleteTextFieldState();
}

class _AutocompleteTextFieldState extends State<AutocompleteTextField> {
  // 预设选项列表
  final List<String> _options = ['Flutter', 'Dart', 'Android', 'iOS', 'Web'];
  final TextEditingController _controller = TextEditingController();
  // 控制下拉菜单的显示/隐藏状态
  bool _showDropdown = false;

  @override
  Widget build(BuildContext context) {
    // 根据输入内容实时过滤匹配的选项
    List<String> _filteredOptions = _options.where((option) {
      return option.toLowerCase().contains(_controller.text.toLowerCase());
    }).toList();

    return Scaffold(
      appBar: AppBar(title: const Text('可输入下拉文本框示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                labelText: '输入或选择技术栈',
                border: OutlineInputBorder(),
                suffixIcon: Icon(Icons.search),
              ),
              // 输入时更新过滤结果并显示下拉菜单
              onChanged: (value) {
                setState(() {
                  _showDropdown = value.isNotEmpty;
                });
              },
              // 点击文本框时，如果已有输入则显示下拉菜单
              onTap: () {
                setState(() {
                  _showDropdown = _controller.text.isNotEmpty;
                });
              },
            ),
            // 只有当有输入且过滤结果不为空时，显示下拉菜单
            if (_showDropdown && _filteredOptions.isNotEmpty)
              Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: const BorderRadius.only(
                    bottomLeft: Radius.circular(8),
                    bottomRight: Radius.circular(8),
                  ),
                ),
                child: ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: _filteredOptions.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(_filteredOptions[index]),
                      onTap: () {
                        setState(() {
                          _controller.text = _filteredOptions[index];
                          _showDropdown = false;
                        });
                      },
                    );
                  },
                ),
              ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 记得销毁控制器，避免内存泄漏
    _controller.dispose();
    super.dispose();
  }
}

关键细节说明： #

• 通过onChanged监听输入内容，实时过滤匹配的选项
• 用_showDropdown变量控制下拉菜单的显示状态
• 选择选项后自动填充文本框并收起下拉菜单

3. 官方Autocomplete组件快速实现 #

如果你不需要高度自定义样式，Flutter官方提供了Autocomplete组件，可以快速实现带下拉提示的文本框：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('官方Autocomplete示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Autocomplete<String>(
          // 根据输入内容生成匹配的选项
          optionsBuilder: (TextEditingValue textEditingValue) {
            if (textEditingValue.text == '') {
              return const Iterable<String>.empty();
            }
            List<String> options = ['Flutter', 'Dart', 'Android', 'iOS', 'Web'];
            return options.where((String option) {
              return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
            });
          },
          // 选中选项时的回调
          onSelected: (String selection) {
            debugPrint('你选择了：$selection');
          },
          // 自定义文本框的样式
          fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
            return TextField(
              controller: textEditingController,
              focusNode: focusNode,
              decoration: const InputDecoration(
                labelText: '选择技术栈',
                border: OutlineInputBorder(),
              ),
            );
          },
        ),
      ),
    );
  }
}

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