Flutter报错：参数类型'JsObject'无法赋值给'BuildContext'的解决

问题根源 #

1. 上下文未正确传递：buildFoodItem方法未获取到Flutter组件树的BuildContext，当前使用的context来自错误导入（如dart:js）。
2. 导入命名冲突：若代码导入了dart:js，其中的context会与Flutter的BuildContext重名，导致类型混淆。

修复步骤 #

步骤1：传递正确的BuildContext #

修改代码，将组件树中的BuildContext逐层传递到需要调用弹窗的位置：

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 1000,
      width: 1280,
      padding: const EdgeInsets.all(5),
      child: GridView.builder(
        shrinkWrap: true,
        itemCount: 9,
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 450,
          mainAxisExtent: 250,
          crossAxisSpacing: 50,
          mainAxisSpacing: 30,
        ),
        // 将itemBuilder的context传递给buildFood
        itemBuilder: (context, index) => buildFood(context, index),
      ),
    );
  }

  // 接收context并传递给buildFoodItem
  Widget buildFood(BuildContext context, int index) => Card(
        color: const Color.fromARGB(255, 209, 209, 209),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        child: Container(
          padding: const EdgeInsets.all(8),
          child: buildFoodItem(context),
        ),
      );

  // 接收正确的BuildContext参数
  Widget buildFoodItem(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 15, bottom: 25, top: 25, right: 15),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                padding: const EdgeInsets.all(1),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  border: Border.all(color: Colors.black, width: 1),
                ),
                child: IconButton(
                  icon: const Icon(Icons.more_horiz),
                  iconSize: 15,
                  onPressed: () {
                    // 使用传递过来的正确BuildContext调用弹窗
                    UpdateDeleteFoodItem.updateDeleteDialog(context);
                  },
                ),
              ),
              // 剩余组件代码...
            ],
          ),
          // 剩余组件代码...
        ],
      ),
    );
  }
}

步骤2：解决导入命名冲突 #

若必须导入dart:js，为其添加别名避免与Flutter的context重名：

// 错误写法
import 'dart:js';

// 正确写法
import 'dart:js' as js;

后续若需使用dart:js的API，通过js.context调用即可避免混淆。

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