Flutter 访问本地图片,相机,裁切
2020-01-19 本文已影响0人
三也视界
用到的组件
# 本地图片
image_picker: ^0.6.0+4
# 图片裁切
image_cropper: ^1.0.2
然后我做的是安卓,需要在Android里面找到 gradle.properties 这个文件 在里面加上这两行
IOS 的话,第一个组件自己加一下 key 这个就变成天生支持了
android.enableJetifier=true
android.useAndroidX=true
我的demo代码直接贴上来吧
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:image_cropper/image_cropper.dart';
// 这些都是基础啦,用你自己的就行
class ModifyAvator extends StatefulWidget {
final String url;
final String id;
ModifyAvator(this.url, this.id);
@override
_ModifyAvatorState createState() => _ModifyAvatorState();
}
class _ModifyAvatorState extends State<ModifyAvator> {
File _image;
// 这里加上
Future getImage() async {
print('click me \n');
// 第一个组件使用访问本地
// ImageSource.gallery 访问本地图库
// ImageSource.camera 访问相机
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
// 这里调用第二个剪切组件
File croppedFile = await ImageCropper.cropImage(
sourcePath: image.path,
ratioX: 1.0,
ratioY: 1.0,
maxWidth: 512,
maxHeight: 512,
);
setState(() {
print('>>>>>>>>>>\n $croppedFile');
_image = croppedFile;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Picker Example'),
),
body: Container(
width: ScreenUtil().setWidth(750),
// height: ScreenUtil().setHeight(300),
color: Colors.black,
child: Center(
// 这里加上
child: _image == null
? Image.network(
Uri.decodeComponent(widget.url.replaceAll("_", "%")),
fit: BoxFit.contain,
)
: Image.file(_image),
),
),
// 这里加上
floatingActionButton: FloatingActionButton(
onPressed: getImage,
tooltip: 'Pick Image',
child: Icon(Icons.add_a_photo),
),
);
}
}