美文网首页Android 相关知识Flutter技术Flutter
Flutter升级至3.0.0版本问题记录

Flutter升级至3.0.0版本问题记录

作者: Smalla | 来源:发表于2022-10-18 17:46 被阅读0次
    1.Stack组件的 overflow 属性被废弃,需改为使用 clipBehavior 属性

    原有属性报错截图:


    image.png

    解决方案:


    image.png
    overflow: Overflow.visible   
    改为   
    clipBehavior: Clip.none
    
    2.原有flutter package里面的FlatButton组件被废弃,需要用其他按钮组件代替(这里我用自定义按钮组件代替)

    原有组件使用报错截图:


    image.png
    image.png

    解决方案:


    image.png
    其中,initInkWellBtn的实现为:
    /// 全局自定义按钮 - 放在公共文件下,可供项目任意处调用
    Widget initInkWellBtn(Widget widget, Function action) {
      return InkWell(
        onTap: () {
          debounce(action);
        },
        child: widget,
      );
    }
    
    3.Scaffold.of(context)showSnackBar属性被废弃

    原有属性报错截图:

    image.png
    解决方案:将Scaffold替换为ScaffoldMessenger,即: image.png
    4.WhitelistingTextInputFormatter属性被废弃

    原有属性报错截图:

    image.png
    解决方案:WhitelistingTextInputFormatter属性替换为:FilteringTextInputFormatter image.png
    5.RaisedButton组件被废弃,改为使用ElevatedButton

    原有组件报错截图:


    image.png

    解决方案:


    image.png
    ElevatedButton(style: ButtonStyle(
      shape: MaterialStateProperty.all(RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(this.borderRadius))),
      backgroundColor: MaterialStateProperty.all(
          isGradient ? Colors.transparent : color),
      // 设为透明色
      elevation: MaterialStateProperty.all(0),
     ))
    
    6.flutter升级至3.0.0版本之后,运行flutter doctor正常,再运行flutter pub get报错:
    image.png
    暂时删除flutter_test组件,后续需要的时候再引入
    7.运行成功之后,报警告:
    image.png
    Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null
    

    指的是Flutter3.0.0之后,WidgetsBinding的实例instance不能为空,所以不需要!

    解决方案:

    1、本地的语法如果用到WidgetsBinding.instance,则手动去掉!
    2、第三方库需要去 pub.dev 检查当前版本是否适配Flutter 3.0.0,以下是本人整理的需要升级至匹配Flutter 3.0.0的库:

    `provider`的版本由`5.0.0`升级至`6.0.0`
    `wechat_assets_picker`的版本由`5.5.8`升级至`6.0.0`
    `percent_indicator`的版本由`3.0.1`升级至`4.2.0`
    `qr_code_scanner`的版本由`0.6.1`升级至`1.0.0`
    `get`的版本由`4.3.8`升级至`4.6.2`
    
    8.下拉刷新pull_to_refresh组件已不支持Flutter 3.0.0,需替换为pull_to_refresh_flutter3 ^2.0.1,语法基本一致,手动修改下文件引用即可
    image.png

    解决方案:


    image.png
    image.png
    9.dropdown_search的版本由1.0.0升级至4.0.0
    (1)修改DropdownSearch类型为menu
    image.png

    解决方案如下:


    image.png
    /// 菜单选中配置
    popupProps: PopupProps.menu(
      showSelectedItems: true,
      itemBuilder: customPopupItemBuilderExample,
    ),
    /// hint文案
    dropdownSearchDecoration: InputDecoration(
      hintText: '请选择改价原因'
    ),
    
    (2)修改DropdownSearch类型为bottomSheet

    报错如图:


    image.png

    解决方案如图:


    image.png
    popupProps: PopupProps.modalBottomSheet(
                    showSelectedItems: true,
                    itemBuilder: customPopupItemBuilderExample,
                    modalBottomSheetProps: ModalBottomSheetProps(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(12),
                                topRight: Radius.circular(12))))),
    

    (3)修改DropdownSearch类型为dialog
    报错如图示:

    image.png

    解决方案如图:


    image.png
    asyncItems: (filter) => logic
                                                  .getBuyerList(filter),
                                            popupProps: PopupProps.dialog(
                                              showSearchBox: true,
                                              dialogProps: DialogProps(
                                                constraints: BoxConstraints(maxHeight: 300)
                                              )
                                            )
    
    10.图表charts_flutter组件已不支持Flutter 3.0.0,需替换为charts_flutter_new ^0.12.0,语法基本一致,手动修改下文件引用即可

    报错截图如下:


    image.png

    解决方案修改:


    image.png
    import 'package:charts_flutter_new/flutter.dart' as charts;
    
    11.图片多选组件multi_image_picker已不支持Flutter 3.0.0,删除,更换为wechat_assets_picker ^7.3.0及以上版本

    报错如下:


    image.png

    解决方案如下:


    image.png
    /// 必要的时候调用`clickIconFromPlatform `方法即可
    CommonUtil.clickIconFromPlatform(5).then(data) {
      /// 选中的图片数据data
     console.log(data);
    }
    
    static Future<List<MultipartFile>> clickIconFromPlatform(count) async {
        List<MultipartFile> files = [];
        try {
          List<AssetEntity>? result = await AssetPicker.pickAssets(getCurContext(),
              pickerConfig: AssetPickerConfig(
                maxAssets: count,
                requestType: RequestType.image,
                themeColor: ColorConfig.main
              )
              );
          List<AssetEntity> resultList = result ?? [];
          if (resultList.length > 0) {
            for (int i = 0; i < resultList.length; i++) {
              AssetEntity entity = resultList[i];
              Uint8List? imageData = await entity.thumbnailDataWithSize(ThumbnailSize((entity.width*0.7).toInt(), (entity.height*0.7).toInt()), quality: 70);
              if(imageData!=null){
                //获得一个uuud码用于给图片命名
                final String uuid = Uuid().v1();
                //获得应用临时目录路径
                final Directory _directory = await getTemporaryDirectory();
                final Directory _imageDirectory =
                await new Directory('${_directory.path}/image/')
                    .create(recursive: true);
                var path = _imageDirectory.path;
                print('本次获得路径:${_imageDirectory.path}');
                //将压缩的图片暂时存入应用缓存目录
                File imageFile = new File('${path}originalImage_$uuid.png')
                  ..writeAsBytesSync(imageData.toList());
                print(imageFile.path);
    
                var file = MultipartFile.fromFileSync(imageFile.path,
                    filename: 'originalImage_${uuid}.png');
                files.add(file);
              }
            }
          }
          return files;
        } catch (e) {}
        return [];
      }
    
    12.点击某些页面,报错如下:
    Unhandled Exception: This widget has been unmounted, so the State no longer has a context (and should be considered defunct).
    Consider canceling any active work during "dispose" or using the "mounted" getter to determine if the State is still active
    
    image.png
    解决方案:
    在当前StatefulWidgetinitState的方法里完成初始化操作
    @override
      void initState() {
        super.initState();
        /// 完成初始化操作
      }
    

    相关文章

      网友评论

        本文标题:Flutter升级至3.0.0版本问题记录

        本文链接:https://www.haomeiwen.com/subject/hyqszrtx.html