Flutter新手求助：导航时出现Undefined name 'context'错误

我是一名Flutter新手，刚学习几天，想要实现页面跳转功能，但使用Navigator时出现了**Undefined name 'context'**错误。尝试参考相关问题解答，但未能解决，也无法完全理解方案。以下是相关代码及报错信息：

_buildDrawer() {
    return ClipPath(
      clipper: OvalRightBorderClipper(),
      child: Drawer(
        child: Container(
          padding: const EdgeInsets.only(left: 16.0, right: 40),
          decoration: BoxDecoration(
              color: primary, boxShadow: [BoxShadow(color: Colors.black45)]),
          width: 300,
          child: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Container(
                    alignment: Alignment.centerRight,
                    child: IconButton(
                      icon: Icon(
                        Icons.power_settings_new,
                        color: active,
                      ),
                      onPressed: () {},
                    ),
                  ),
                  Container(
                    height: 90,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        gradient:
                            LinearGradient(colors: [Colors.pink, Colors.red])),
                    child: CircleAvatar(
                      radius: 40,
                      backgroundImage: NetworkImage(profile),
                    ),
                  ),
                  SizedBox(height: 5.0),
                  Text(
                    "Mohd Amin bin Yaakob",
                    style: TextStyle(color: Colors.white, fontSize: 18.0),
                  ),
                  Text(
                    "Pegawai",
                    style: TextStyle(color: active, fontSize: 16.0),
                  ),
                  SizedBox(height: 30.0),
                  _buildRow(Icons.home, "Home", () {
                    Navigator.push(context,
                      MaterialPageRoute(
                        builder: (context) {
                          return HomePageWidgetPage();
                        },
                      ),
                    );
                  }),
                  _buildDivider(),
                  _buildRow(Icons.home, "Home", () {
                    Navigator.push(context,
                      MaterialPageRoute(
                        builder: (context) {
                          return HomePageWidgetPage();
                        },
                      ),
                    );
                  }),
                  _buildDivider(),
                  _buildRow(Icons.home, "Home", () {
                    Navigator.push(context,
                      MaterialPageRoute(
                        builder: (context) {
                          return HomePageWidgetPage();
                        },
                      ),
                    );
                  }),
                  _buildDivider(),
                  _buildRow(Icons.home, "Home", () {
                    Navigator.push(context,
                      MaterialPageRoute(
                        builder: (context) {
                          return HomePageWidgetPage();
                        },
                      ),
                    );
                  }),
                  _buildDivider(),
                  _buildRow(Icons.home, "Home", () {
                    Navigator.push(context,
                      MaterialPageRoute(
                        builder: (context) {
                          return HomePageWidgetPage();
                        },
                      ),
                    );
                  }),
                  _buildDivider(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Divider _buildDivider() {
    return Divider(
      color: active,
    );
  }

  Widget _buildRow(IconData icon, String title, VoidCallback onTap) {
    final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
    return InkWell(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: Row(
          children: [
            Icon(
              icon,
              color: active,
            ),
            SizedBox(width: 10.0),
            Text(
              title,
              style: tStyle,
            ),
          ],
        ),
      ),
      onTap: onTap,
    );
  }
}

报错信息：Flutter导航中出现“Undefined name 'context'”

问题原因 #

你在_buildRow的点击回调里直接使用context，但这个context没有在当前作用域中定义——_buildDrawer方法没有接收BuildContext参数，回调自然拿不到可用的上下文对象。

解决方法 #

提供两种简单可行的修复方式：

方式一：给_buildDrawer传入context #

修改_buildDrawer的方法定义，添加BuildContext参数：

Widget _buildDrawer(BuildContext context) { // 新增BuildContext参数
  // 原有代码保持不变，回调里的context即可正常使用
}

然后在调用_buildDrawer的地方（比如页面Scaffold的drawer属性中）传入当前页面的context：

drawer: _buildDrawer(context),

方式二：让_buildRow传递自身的context #

调整_buildRow的实现，把点击回调改成接收context的类型，直接使用InkWell的上下文：

// 修改_buildRow的方法签名
Widget _buildRow(IconData icon, String title, Function(BuildContext context) onTap) {
  final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
  return InkWell(
    // 点击时把InkWell的context传给回调
    onTap: () => onTap(context),
    child: Container(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        children: [
          Icon(icon, color: active),
          SizedBox(width: 10.0),
          Text(title, style: tStyle),
        ],
      ),
    ),
  );
}

调用_buildRow时，回调就能拿到可用的context：

_buildRow(Icons.home, "Home", (context) {
  Navigator.push(context,
    MaterialPageRoute(
      builder: (context) => HomePageWidgetPage(),
    ),
  );
}),

补充说明 #

Flutter中的context是Widget树的上下文对象，只有在Widget的build方法内，或者显式传入/从Widget回调中获取的情况下才能使用。如果是独立封装的方法，必须手动传递context才能在内部调用需要上下文的API（比如Navigator）。

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