美文网首页Flutter开发圈
Flutter 访问本地图片,相机,裁切

Flutter 访问本地图片,相机,裁切

作者: 三也视界 | 来源:发表于2020-01-19 20:40 被阅读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),
          ),
        );
      }
    }
    
    

    相关文章

      网友评论

        本文标题:Flutter 访问本地图片,相机,裁切

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