Flutter开发圈

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),
      ),
    );
  }
}

上一篇下一篇

猜你喜欢

热点阅读