Flutter使用GetX弹出bottomSheet时报Null check operator空值错误

报错原因 #

该_CastError: Null check operator used on a null value报错是GetX底层找不到可用的导航上下文导致，绝大多数场景是项目根入口未使用GetX提供的GetMaterialApp组件，普通MaterialApp不会为GetX的弹窗、路由等API提供所需的上下文环境。

解决方案 #

步骤1：替换根入口组件 #

修改main.dart中的启动代码，将根组件从MaterialApp替换为GetMaterialApp，示例如下：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 替换此处的MaterialApp为GetMaterialApp
    return GetMaterialApp(
      title: '应用名称',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

步骤2：（可选）补充上下文参数 #

如果替换后仍有报错，可在调用Get.bottomSheet时手动传入当前上下文，修改后的代码如下：

GestureDetector(
  onTap:(){
    Get.bottomSheet(
      Container(
        child: Wrap(
            children:<Widget>[
              ListTile(
                leading: Icon(Icons.wb_incandescent),
                title: Text("Testing"),
                onTap: () => Get.changeTheme(ThemeData.light()),
              ),
              ListTile(
                leading: Icon(Icons.wb_incandescent),
                title: Text("Testing"),
                onTap: () => Get.changeTheme(ThemeData.dark()),
              ),
            ]
        ),
      ),
      // 补充当前上下文参数
      context: context,
    );
  },
  child: Container(
    width: 30.0,
    height: 30.0,
    decoration: BoxDecoration(
      color: Color(0xFF1D265F),
      borderRadius: BorderRadius.circular(80.0),
    ),
    child: LayoutBuilder(
      builder: (context, constraint) {
        return Icon(
          Icons.info_outline_rounded,
          color: widget.cardContent.cardColor,
          size: constraint.biggest.height,
        );
      },
    ),
  ),
),

做完以上两步即可正常触发bottomSheet弹窗。

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