Flutter Provider状态异常：图片识别配料未跨组件同步

我是Flutter新手，刚学习Provider包，需要更新用户选择配料的selectionSet。更新方式有两种：TextField搜索输入和拍照识别，前者可正常同步状态，但拍照返回的预测配料列表仅在DisplayPictureScreen中更新了selectionSet，IngredientsInput组件中的selectionSet未同步更新。已尝试Consumer、Provider.of、context.read/watch等方法，问题仍未解决。

相关代码 #

main.dart（也曾尝试用ChangeNotifierProvider.value包裹） #

Future<void> main() async {
  runApp(
    ChangeNotifierProvider(
      create: (context) => IngredientSelection(),
      child: MaterialApp(
        theme: ThemeData(
          colorScheme: ColorScheme.fromSwatch(
            primarySwatch: Colors.green,
          ),
        ),
        home: TossUp(),
      ),
    ),
  );
}

ingredient_selection.dart #

class IngredientSelection extends ChangeNotifier {
  Set<String> selectionSet = {}; 
  void add(String ingredient) {
    selectionSet.add(ingredient); 
    notifyListeners();
  }

  void addAll(List<String> ingredients) {
    selectionSet.addAll(ingredients);
    notifyListeners();
  }
}

display_picture_screen.dart（重点关注ElevatedButton部分） #

class DisplayPictureScreen extends StatelessWidget {

  DisplayPictureScreen({super.key, required this.picture});

  final XFile picture;
  final IngredientsClassifier classifier = IngredientsClassifier();
   
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Preview Page')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min, 
          children: [
            Image.file(File(picture.path), fit: BoxFit.cover, width: 250),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: (
                () async {
                  var ingredientSelection = context.read<IngredientSelection>();
                  List<String> ingredients = await classifier.getPicIngredients(picture);
                  ingredientSelection.addAll(ingredients);
                  print("After: ${ingredientSelection.selectionSet}"); //返回结果正确
                  
                  Navigator.pop(context);
                  Navigator.pop(context); 
                  }
              ), 
              child: Text("get ingredients")
            )
          ]
        ),
      ),
    );
  }
}

ingredients_input.dart（也曾尝试用Consumer包裹viewSelections的返回值） #

class IngredientsInput extends StatefulWidget {
  IngredientsInput({super.key});
  @override
  State<IngredientsInput> createState() {
    return _IngredientsInput();
  }
}

class _IngredientsInput extends State<IngredientsInput> {
  //...其他代码 

  Widget viewSelections() {
        IngredientSelection ingredientSelection;
        ingredientSelection = Provider.of<IngredientSelection>(context);
        //var ingredientSelection = context.watch<IngredientSelection>();
        print(ingredientSelection.selectionSet);
        if(ingredientSelection.selectionSet.isNotEmpty) {
          return Container(
                height: 400,
                child: ListView.builder(
                  padding: const EdgeInsets.all(8),
                  itemCount: ingredientSelection.selectionSet.length,
                  itemBuilder: (BuildContext context, int i) {
                    return Container(
                      height: 40,
                      child: Center(
                        child: Text(
                          ingredientSelection.selectionSet.elementAt(i),
                          style: TextStyle(fontSize: 20),
                          ),
                      )
                    );
                  }
                ),
              );
        }
        return SizedBox(height: 400,);
      }
  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
          TextFieldSearch(
            initialList: _ingredientsList, 
            label: label, 
            controller: myController,
            
          ),
          Consumer(
            builder: (context, ingredientSelection, child)  {
                return viewSelections();
            } 
          )
          
      ],
    );
  }
}

问题诊断与修复方案 #

核心问题分析 #

1. viewSelections状态获取逻辑错误：该方法直接使用State的context调用Provider.of，没有绑定到外层Consumer的监听逻辑，导致无法感知状态变化。
2. 可变集合的潜在问题：虽然调用了notifyListeners，但可变Set的内部修改可能被Flutter忽略（概率较低，但会影响状态更新的可靠性）。

修复步骤 #

1. 重构viewSelections方法，接收状态参数

避免直接从context获取状态，改为接收外部传入的IngredientSelection实例：

Widget viewSelections(IngredientSelection ingredientSelection) {
  print(ingredientSelection.selectionSet);
  if(ingredientSelection.selectionSet.isNotEmpty) {
    return Container(
      height: 400,
      child: ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: ingredientSelection.selectionSet.length,
        itemBuilder: (BuildContext context, int i) {
          return Container(
            height: 40,
            child: Center(
              child: Text(
                ingredientSelection.selectionSet.elementAt(i),
                style: TextStyle(fontSize: 20),
              ),
            )
          );
        }
      ),
    );
  }
  return SizedBox(height: 400,);
}

2. 在Consumer中传入状态实例

修改IngredientsInput的Consumer代码，将Consumer获取到的状态传入viewSelections：

Consumer<IngredientSelection>(
  builder: (context, ingredientSelection, child) {
    return viewSelections(ingredientSelection);
  } 
)

3.（可选优化）使用不可变集合提升可靠性

修改IngredientSelection，每次更新时创建新的Set实例，确保状态变化被明确检测：

class IngredientSelection extends ChangeNotifier {
  Set<String> _selectionSet = {}; 
  // 对外暴露不可变视图，防止外部直接修改集合
  Set<String> get selectionSet => UnmodifiableSetView(_selectionSet);

  void add(String ingredient) {
    _selectionSet = {..._selectionSet, ingredient}; 
    notifyListeners();
  }

  void addAll(List<String> ingredients) {
    _selectionSet = {..._selectionSet, ...ingredients};
    notifyListeners();
  }
}

验证修复 #

拍照识别配料后点击按钮更新状态，返回IngredientsInput页面，确认列表已同步显示新添加的配料。

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