Flutter升级至3.0.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();
    /// 完成初始化操作
  }
13.A页面跳转B页面(B页面为预览图片页),再从B页面返回时,报错如下:
[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: Looking up a deactivated widget's ancestor is unsafe.
At this point the state of the widget's element tree is no longer stable.
To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling dependOnInheritedWidgetOfExactType() in the widget's didChangeDependencies() method.

解决方案:上面说的意思是不是安全的引用小部件,就是已经销毁的界面然后重复销毁,会报上面错误

方案1:
// 只需在报错代码行外层加个判断,关键代码如下所示:
// 当mounted为true时才可以调用context的属性或方法
if (context.mounted) {
   // 报错的代码
}

方案2:
// 项目中用到`photo_view `组件库,当前版本为`0.13.0`,升级为`0.14.0`,版本更新中有组件已解决
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容