Flutter报JsObject无法赋值给BuildContext参数错误如何解决

报错由两个核心问题共同导致：

1. 错误引入了dart:js库，该库是Flutter Web端用于和JavaScript交互的专用库，库中暴露了一个类型为JsObject的全局context对象。你在类成员位置声明height、width属性时，代码不在build方法的参数作用域内，Dart会优先匹配到全局导入的JsObject类型的context，和MediaQuery.of()方法要求的BuildContext类型不匹配，直接触发类型报错。
2. 就算删除错误的导入，写在类成员位置的MediaQuery.of(context)也无法正常运行：StatelessWidget的成员属性初始化时，组件还未挂载到Flutter组件树，不存在可用的BuildContext，根本无法通过上下文获取屏幕尺寸信息。另外原代码末尾括号嵌套有误，也会触发语法报错。

按以下步骤调整即可：

• 删除无用的import 'dart:js';导入语句，普通页面开发不需要引入这个JS互操作库。
• 把获取屏幕宽高的逻辑移动到build方法内部，此时方法参数传入的context是组件树中有效的BuildContext，可以正常获取媒体查询信息。
• 修正代码末尾错乱的括号嵌套，保证语法正确。

修复后的完整可运行代码：

import 'package:flutter/material.dart';
import 'package:PPG/homePage.dart';
import 'constants.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 仅在build方法内能拿到有效的BuildContext，用于获取屏幕尺寸
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Stack(
            children: [
              Image.asset(
                image,
                height: height * 0.4,
                width: width,
              )
            ],
          )
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者KAUSALLYA AP MAHENDRAN A18MB00