Flutter中使用Overlay传入context提示:Null check operator used on a null value(对空值使用空检查运算符)

这篇具有很好参考价值的文章主要介绍了Flutter中使用Overlay传入context提示:Null check operator used on a null value(对空值使用空检查运算符)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先此时使用的是GetX框架,框架截图如下:

null check operator used on a null value,问题锦集,flutter

View中代码如下:

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

  @override
  Widget build(BuildContext context) {
    final logic = Get.put(AddTaskLogic());
    final state = Get.find<AddTaskLogic>().state;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Tcolor.barBackgroudColor,
        elevation: 0,
      ),
      body: _addTaskContent(state),
    );
  }

  _addTaskContent(AddTaskState addTaskState) {
    return GetBuilder<AddTaskLogic>(builder: (logic) {
      return Container(
        child: Column(
          children: [
            //任务类型 0-工作 1-学习 2-生活
            Container(
              key: logic.typeKey,
              child: InputFied(
                  fieldwidth: 300,
                  hintText: "请选择任务类型",
                  controller: addTaskState.contentController,
                  iconWidget: InkWell(
                    child: Icon(addTaskState.typeExpand?Icons.expand_less_outlined:Icons.expand_more,color: Colors.grey,size: 18,),
                    onTap: (){
                      print("弹出任务类型选择框");
                      logic.selectTypePop();
                    },
                  )
              ),
            ),
          ],
        ),
      );
    });
  }
}

logic代码

class AddTaskLogic extends GetxController {
  final AddTaskState state = AddTaskState();
  GlobalKey typeKey = GlobalKey();
  //弹出任务类型选择框
  selectTypePop(){
    state.typeExpand=!state.typeExpand;
    update();
    RenderBox typeBox = typeKey.currentContext!.findRenderObject() as RenderBox;
    print("要开始构建了Pop了");
    
    PopToastManager().buildUI(
      context: Get.context!,
      isClickDiss: true,
      X: typeBox.localToGlobal(Offset.zero).dx + 28 + 76,
      Y: typeBox.localToGlobal(Offset.zero).dy + 26,
      offx: 0,
      offy: 0,
      width: 260,
      height: 90,
      childWidget: ListView.builder(
        itemCount: state.taskType.length,
        itemBuilder: (context, index) {
          print("构建UI");
          return Container(
            child: Row(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(60),
                  child: Container(
                    width: 13,
                    height: 13,
                    decoration: BoxDecoration(
                      color: state.typeColor[index],
                    ),
                  ),
                ),
                SizedBox(width: 20,),
                Text(state.taskType[index]),
              ],
            ),
          );
        },
      ),
    );
    update();
  }
}

对Overlay的使用封装了一个单独的类PopToastManager(),PopToastManager()代码如下:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//封装一个构造弹窗类
/*OverlayEntry 可以实现悬浮窗效果*/
class PopToastManager{

  /*OverlayEntry类型的私有实例变量*/
  OverlayEntry? _overlayEntry;
  /*PopToastManager类型的私有实例变量*/
  static PopToastManager? _manager;
  /*PopToastManager的私有构造函数,用于创建新实例*/
  PopToastManager._();
  /*PopToastManager的工厂构造函数,用于创建类的实例,并保证只创建一个实例*/
  factory PopToastManager(){
    if(_manager==null){
      _manager=PopToastManager._();
    }
    return _manager!;
  }

  /*在buildUI()函数内部创建overlayEntry对象并且插入到overlayEntry中*/
  void buildUI(
      {
        required BuildContext context,
        required bool isClickDiss,
        required double X,
        required double Y,
        required double offx,
        required double offy,
        required double width,
        required double height,
        required Widget childWidget,
        Function? dismissCallBack/*取消的回调函数*/
      }){

    //创建 overlayEntry
    OverlayEntry overlayEntry=OverlayEntry(

        builder: (context){
          print("开始构建overlayEntry");
          return GestureDetector(
            behavior:HitTestBehavior.opaque ,
            /*点击事件*/
            onTap: (){
              /*如果可以点击*/
              if(isClickDiss){
                /*取消回调函数不为空则调用取消回调函数*/
                if (dismissCallBack != null) {
                  dismissCallBack();
                }
                /*蒙层取消函数*/
                dissmiss();
              }
            },
            /*子组件*/
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.transparent,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Container(height: Y,),
                  SizedBox(height: Y,),
                  Container(
                    margin: EdgeInsets.fromLTRB(offx + X,offy, 0, 0),
                    width: width,
                    height: height,
                    child: childWidget,
                  ),
                ],
              ),
            ),
          );
        });
    this._overlayEntry = overlayEntry;
    //插入到 Overlay中显示 OverlayEntry
    Overlay.of(context)!.insert(overlayEntry);
    /*final overlay = Overlay.of(context);
    if (overlay != null) {
      overlay.insert(overlayEntry);
    } else {
      print('Overlay is null');
    }*/
  }


  void dissmiss(){
    if(this._overlayEntry != null){
      print("蒙层消失");
      this._overlayEntry!.remove();
      this._overlayEntry = null;
    }
  }
}

运行结果如下:

null check operator used on a null value,问题锦集,flutter

 根据打印的语句可以得知,代码根本没有开始构建OverlayEntry(builder:(context){})

查看错误,发现问题出现在对Overlay.of(context)!.insert(overlayEntry);中context的空值判断

1、于是我首先在PopToastManager()类buildUI()方法中添加对context是否为空的判断

null check operator used on a null value,问题锦集,flutter

 文章来源地址https://www.toymoban.com/news/detail-778763.html

此时运行结果

null check operator used on a null value,问题锦集,flutter

说明:此时传入的context不为空但是Overlay.of(context)为空

为什么会这样?

首先:需要知道Overlay.of(context)意味着什么?

据搜索Overlay 是一个可以在应用程序中显示浮动元素的特殊 Widget。Overlay.of(context)是Flutter框架中的一个方法,用于获取指定上下文中最近的Overlay,Overlay.of(context) 方法返回的对象可以用于向 Overlay 中添加浮动元素。

如果 Overlay.of(context) 返回 null,则表示指定上下文中没有找到 Overlay。这通常是由于没有在该上下文的 Widget 树中添加 Overlay 导致的。在使用 Overlay.of(context) 之前,需要确保在应用程序的 Widget 树中添加了 Overlay。

此时可推测:

1、在上下文中没有添加Overlay,所以不能向Overlay 中添加浮动元素x

2、上下文出现了问题

 试解决问题(1):

 

 出错的原因:

1、在 Flutter 中,context 是一个非常重要的概念,它代表了 widget 在 widget 树中的位置。context 的不同,可能会影响到你能够访问到的 widget 或者 state。

2、在代码中传入context时使用了 Get.context。Get 是一个用于状态管理和依赖注入的库,它的 context 是全局的,可能并不在你当前 widget 的 widget 树中。因此,当你使用 Get.context 时,你可能得到的是一个全局的、不在当前 widget 树中的 context。

3、但是 Overlay.of(context) 需要一个在当前 widget 树中的 context 才能正常工作。如果你传入的 context 不在当前 widget 树中,Overlay.of(context) 就会返回 null。4、所以,即使 Get.context 不为 null,Overlay.of(Get.context) 也可能为 null,因为 Get.context 可能不在当前 widget 树中。 要解决这个问题,你需要确保你传入 Overlay.of(context) 的 context 是在当前 widget 树中的。

将context作为参数传入进selectTypePop()

 

到了这里,关于Flutter中使用Overlay传入context提示:Null check operator used on a null value(对空值使用空检查运算符)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用DevEco Studio导入Har模块,提示“Module Check Failed”—鸿蒙开发已解决

    最近也是遇到了这个问题,看到网上也有人在询问这个问题,本文总结了自己和其他人的解决经验,解决了导入Har模块,提示“Module Check Failed\\\" 的问题。 使用DevEco Studio导入Har模块,提示“Module Check Failed\\\" 打开工程时,DevEco Studio对Har模块进行校验,提示“Module Check Failed”,需

    2024年02月02日
    浏览(69)
  • Android 11及以上出现 Intent.resolveActivity(context.getPackageManager()) == null的处理

    1、使用场景: App调用系统相机拍照设置图片。 2、问题描述:  targetSdkVersion = android 11的之后,以下代码captureIntent.resolveActivity(context.getPackageManager()) 直接返回了null。 3、系统环境: Android 11 , targetSdkVersion == 33 4、解决方案: (1)调用系统应用时: 方案1:在清单文件中添加

    2024年02月13日
    浏览(38)
  • 【postgresql 基础入门】表的约束(二) 唯一unique、非空not null、check、exclusion约束,原理机制以及多列组合约束

    ​ 专栏内容 : postgresql内核源码分析 手写数据库toadb 并发编程 个人主页 :我的主页 管理社区 :开源数据库 座右铭:天行健,君子以自强不息;地势坤,君子以厚德载物. 在数据库中,数据类型可以限制数据存储的大小,也能在一定程度上限制存储的数据种类,但是对于数

    2024年04月08日
    浏览(57)
  • macOS 终端运行提示“Operation not permitted ”解决办法

    终端运行命令后提“示Operation not permitted” 报错,这个问题一般只有在macOS Ventura系统出现比较频繁,或者是从其他版本升级到Ventura的也需要注意这个小问题。   解决办法 打开“系统偏好设置 — 隐私与安全性 — 完全磁盘访问权限 – 找到“终端” ,可以看到终端后面的开

    2024年02月11日
    浏览(55)
  • flutter项目怎么判断是不是web平台?Unsupported operation: Platform._operatingSystem

    如果你使用Platform 这个工具来判断的时候,很有可能会报错:  ======== Exception caught by widgets library ======================================================= The following UnsupportedError was thrown building MyApp(dirty): Unsupported operation: Platform._operatingSystem The relevant error-causing widget was:  Platform判断的时候

    2024年01月22日
    浏览(48)
  • bitbucket ssh登录提示 port 22: Operation timed out

    执行命令 结果提示: 原因:使用了22端口其实并不稳定。配置的其实如果连接到443端口更稳定。修改 ~/.ssh/config ,增加指定Port为443,并且使用Hostname,既可。 ~/.ssh/config 文件内容如下: 最后两句是关键。

    2024年02月14日
    浏览(74)
  • Flutter:安装依赖报错doesn‘t support null safety

    项目中需要引用http依赖,在pubspec.yaml文件中添加如下信息: 当同步时,报错信息如下: [myflutter] flutter pub upgrade Resolving dependencies... The current Dart SDK version is 3.1.3. Because myflutter depends on http =0.2.8+2 0.13.0-nullsafety.0 which doesn\\\'t support null safety, version solving failed. The lower bound of \\\"sdk:

    2024年02月04日
    浏览(50)
  • 【异常】IDEA提示An illegal reflective access operation has occurred警告

    在 install Maven项目时,控制台出现警告如下: 字面意思说的是发生的了一个非法的反射访问操作,在JDK 9之前 ,Java允许通过反射机制访问所有的成员,这些成员的类型包括私有(private),公共(public),包( package )和受保护(protected)。 JDK9新增了模块系统之后, 对反射行为做出了一

    2024年02月09日
    浏览(67)
  • 【异常】PGSQL提示 ERROR: operator does not exist: character varying = integer

    这是数据库和实体类里面字段类型不一致造成的报错#

    2024年02月03日
    浏览(44)
  • Flutter Cannot run with sound null safety, because the following dependencies

    flutter sdk 版本升级到2.0或者更高的版本后,运行之前的代码会报错 这些包不支持 safety模式。我们可以在运行的时候添加–no-sound-null-safety。打开Android Studio,然后依次选择【Run】 --【 Edit Configurations】 -- 【Add Additional Run args 】– 【–no-sound-null-safety】,如下图。

    2024年02月10日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包