Flutter开发报错：Unsupported operation: Cannot add to an unmodifiable list

报错UnsupportedError (Unsupported operation: Cannot add to an unmodifiable list)的核心原因是你获取的shoppingList是不可修改的列表。这类列表通常通过List.unmodifiable()、const []或Iterable.toList(growable: false)创建，不支持add、remove等修改操作。

从你的代码来看，shoppingList来自Configuration这个InheritedWidget，问题大概率出在Configuration中列表的初始化或传递方式上，结合代码给出两种解决思路：

思路1：确保列表本身可修改 #

检查config.dart中Configuration的实现，以及父组件中shoppingList的初始化方式：

• 不要用不可修改的方式初始化列表，比如把：

  final shoppingList = List.unmodifiable([]);
  

  改成可增长的列表：

  final shoppingList = <ShoppingItem>[];
  // 或者
  final shoppingList = List.empty(growable: true);
  

• 同时，在父组件中更新列表时，必须通过setState触发Configuration的重建（因为InheritedWidget依赖实例引用变化来通知子组件）：

  // 父组件中的添加逻辑
  void addItem(ShoppingItem item) {
    setState(() {
      shoppingList.add(item);
    });
  }
  

思路2：通过回调让父组件处理列表更新 #

直接在子页面修改全局列表并非最佳实践，更稳妥的方式是通过回调通知父组件执行更新：

1. 修改AddShoppingItemScreen，添加回调参数：

   class AddShoppingItemScreen extends StatefulWidget {
     final void Function(ShoppingItem) onAddItem;
   
     const AddShoppingItemScreen({Key? key, required this.onAddItem}) : super(key: key);
   
     @override
     State<AddShoppingItemScreen> createState() => _AddShoppingItemScreenState();
   }
   

2. 更新按钮的点击逻辑，调用回调而非直接修改列表：

   ElevatedButton(
     onPressed: () {
       final newItem = ShoppingItem(
         name: _textEditingController.text, 
         done: false
       );
       widget.onAddItem(newItem);
       Navigator.pop(context);
     },
     child: const Text('Add')
   ),
   

3. 在父组件打开页面时传递回调，负责更新列表并触发UI刷新：

   Navigator.push(
     context,
     MaterialPageRoute(
       builder: (context) => AddShoppingItemScreen(
         onAddItem: (item) {
           setState(() {
             _shoppingList.add(item);
           });
         },
       ),
     ),
   );
   

这种方式不仅避免了直接修改不可修改列表的问题，还符合Flutter状态管理的最佳实践，确保UI能正确响应列表变化。

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