Flutter 使用image_gallery_saver保存圖片

Flutter  使用image_gallery_saver保存圖片

其實我們開發項目app的時候, 你會發現有很多問題, 比如保存圖片功能時 ,不僅導入包依賴包: image_gallery_saver 就能解決問題的.

備註: 圖片拖動發大功能(https://www.cnblogs.com/maqingyuan/p/13693303.html)
廢話不多說,先上效果圖:

保存圖片功能共分爲兩步

 

第一步: 權限開啓問題(permission_handler插件庫地址: https://pub.dev/packages/permission_handler )

• 導包:

permission_handler: ^3.0.0 #申請儲存權限插件

• 配置權限

<!-- 開啓讀寫storage權限 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

權限配置的位置效果圖如下:

 

 

 第二步: 使用 image_gallery_saver 插件, 插件地址鏈接:  https://pub.dev/packages/image_gallery_saver

• 導包

mage_gallery_saver: ^1.5.0 #圖片保存到本地

• 項目代碼引入

import 'package:image_gallery_saver/image_gallery_saver.dart'; //保存圖片插件

• 案例代碼如下

import 'package:flutter/material.dart';
import 'dart:io'; //判斷ios還是android插件
import 'package:flutter_drag_scale/flutter_drag_scale.dart'; //圖片點擊放大插件
import 'package:image_gallery_saver/image_gallery_saver.dart'; //保存圖片插件
import 'dart:typed_data'; //保存圖片插件
// import '../../utils/http.dart';
import 'package:permission_handler/permission_handler.dart';

import 'package:dio/dio.dart';
import 'package:oktoast/oktoast.dart'; //toast插件


class OpenImg extends StatefulWidget{
    final String url;
    // final Function onTap;
    const OpenImg({Key key, this.url}):super(key: key);
    @override
    _OpenImgState createState() => _OpenImgState();
}

class _OpenImgState extends State<OpenImg>{

    void initState(){
        super.initState();
        // 檢查並請求權限
        var permission = PermissionHandler().checkPermissionStatus(PermissionGroup.storage);
        print("permission status is " + permission.toString());
        PermissionHandler().requestPermissions(<PermissionGroup>[
            PermissionGroup.storage, // 在這裏添加需要的權限--儲存權限
        ]);
    }

    //點擊保存圖片
    // 需要引入一下庫
    // import 'package:image_gallery_saver/image_gallery_saver.dart';
    // import 'dart:typed_data';


    void _save() async {
        var response = await Dio().get("http://pic3.zhimg.com/2d41a1d1ebf37fb699795e78db76b5c2.jpg", options: Options(responseType: ResponseType.bytes));
        final result = await ImageGallerySaver.saveImage(
            Uint8List.fromList(response.data)
        );
        // 判斷ios還是android,故需要引入 import 'dart:io';
        if(Platform.isIOS){
            if(result){
                showToast('成功保存到相冊中');
            }else{
                showToast('保存失敗');
            }
        }else{
            if(result != null){
                showToast('成功保存到相冊中');
            }else{
                showToast('保存失敗');
            }
        }
    }

    @override
    Widget build(BuildContext context){
        return Scaffold(
            appBar: AppBar(
                backgroundColor: Colors.black,
                elevation: 0.0, //導航欄陰影
                actions: [
                    PopupMenuButton(
                        child: Icon(Icons.more_vert),
                        itemBuilder: (BuildContext context){
                            return <PopupMenuItem<String>>[
                                PopupMenuItem<String>(child: Text("下載圖片"), value: "download",),
                                PopupMenuItem<String>(child: Text("分享圖片"), value: "share",),
                            ];
                        },
                        onSelected: (String action) {
                            switch (action) {
                            case "download":
                                _save();
                                break;
                            case "share":
                                print("分享圖片");
                                break;
                            }
                        },
                        onCanceled: () {
                            print("onCanceled");
                        }
                    )
                ],
            ),
            body: DragScaleContainer(
                doubleTapStillScale: true,
                child: Container(
                    color: Colors.black,
                    height: MediaQuery.of(context).size.height,
                    child: Image.network(this.widget.url, fit: BoxFit.contain),
                ),
            )
            
        );
    }
}

注意以上代碼的備註說明,不然會有報錯的可能性.

謝謝大家!!!有問題評論區見