如何在Flutter中用Provider动态生成多个Dropdown（替代setState）

问题背景 #

原本需求是动态生成多个下拉选择框，打算用Provider替代setState管理状态，但实现时遇到断言错误：

构建RawGestureDetector-[LabeledGlobalKey#766ba](state: RawGestureDetectorState#a1e19(gestures: , behavior: opaque))时抛出以下断言：在_DivisionDropDownButtonState.initState()完成前，调用了dependOnInheritedWidgetOfExactType<_InheritedProviderScope<EventsProvider?>>()或dependOnInheritedElement()。

错误原因 #

initState执行时，Widget还未完成与Element树的绑定，此时直接调用Provider.of()或通过Consumer获取Provider，会触发依赖InheritedWidget的操作，而框架此时不允许建立这种依赖，因此抛出断言。

解决方案 #

1. 定义Provider状态模型 #

创建EventsProvider类，统一管理下拉框的选项、选中状态及增删操作：

import 'package:flutter/foundation.dart';

class EventsProvider extends ChangeNotifier {
  // 存储每个下拉框的选中值，索引对应下拉框位置
  List<String?> _selectedValues = [];
  // 下拉框可选选项列表
  final List<String> _dropdownOptions = ['选项1', '选项2', '选项3', '选项4'];

  List<String?> get selectedValues => _selectedValues;
  List<String> get dropdownOptions => _dropdownOptions;

  // 添加新下拉框，默认选中值为null
  void addDropdown() {
    _selectedValues.add(null);
    notifyListeners();
  }

  // 移除指定位置的下拉框（至少保留一个）
  void removeDropdown(int index) {
    if (_selectedValues.length > 1) {
      _selectedValues.removeAt(index);
      notifyListeners();
    }
  }

  // 更新指定下拉框的选中值
  void updateSelectedValue(int index, String? value) {
    if (index >= 0 && index < _selectedValues.length) {
      _selectedValues[index] = value;
      notifyListeners();
    }
  }
}

2. 调整下拉框组件的初始化逻辑 #

自定义下拉框组件的State类中，避免在initState直接获取Provider，改用WidgetsBinding.instance.addPostFrameCallback等待Widget挂载完成后再操作：

class DivisionDropDownButton extends StatefulWidget {
  final int index;
  const DivisionDropDownButton({Key? key, required this.index}) : super(key: key);

  @override
  State<DivisionDropDownButton> createState() => _DivisionDropDownButtonState();
}

class _DivisionDropDownButtonState extends State<DivisionDropDownButton> {
  late EventsProvider _provider;

  @override
  void initState() {
    super.initState();
    // 等待Widget完成首次绘制后再获取Provider
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _provider = Provider.of<EventsProvider>(context, listen: false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<EventsProvider>(
      builder: (context, provider, child) {
        return Row(
          children: [
            Expanded(
              child: DropdownButtonFormField<String>(
                value: provider.selectedValues[widget.index],
                items: provider.dropdownOptions.map((option) {
                  return DropdownMenuItem(
                    value: option,
                    child: Text(option),
                  );
                }).toList(),
                onChanged: (value) => provider.updateSelectedValue(widget.index, value),
                hint: const Text('选择选项'),
              ),
            ),
            IconButton(
              icon: const Icon(Icons.remove_circle),
              onPressed: () => provider.removeDropdown(widget.index),
            )
          ],
        );
      },
    );
  }
}

3. 主页面实现动态生成逻辑 #

主页面通过Consumer监听Provider变化，动态渲染下拉框，并添加新增按钮：

class DynamicDropdownPage extends StatelessWidget {
  const DynamicDropdownPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('动态下拉框')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Consumer<EventsProvider>(
              builder: (context, provider, child) {
                return Column(
                  children: List.generate(provider.selectedValues.length, (index) {
                    return Padding(
                      padding: const EdgeInsets.only(bottom: 8.0),
                      child: DivisionDropDownButton(index: index),
                    );
                  }),
                );
              },
            ),
            ElevatedButton(
              onPressed: () => Provider.of<EventsProvider>(context, listen: false).addDropdown(),
              child: const Text('添加下拉框'),
            )
          ],
        ),
      ),
    );
  }
}

4. 全局配置Provider #

在应用入口处用ChangeNotifierProvider包裹MaterialApp，确保全局可访问状态：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => EventsProvider()..addDropdown(), // 初始化时添加一个默认下拉框
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const DynamicDropdownPage(),
    );
  }
}

关键注意点 #

• 禁止在initState、dispose等生命周期方法中直接调用Provider.of(context)，最安全的方式是用postFrameCallback等待Widget挂载完成
• 所有状态变更必须通过Provider的方法执行，并调用notifyListeners()触发UI更新
• 用Consumer包裹需要更新的UI区域，避免不必要的全局重绘

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