Flutter升级至3.0.0版本问题记录
2022-10-18 本文已影响0人
Smalla
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
解决方案：
在当前
StatefulWidget的initState的方法里完成初始化操作
@override
void initState() {
super.initState();
/// 完成初始化操作
}
