No matter what he does, every personon earth plays a central role in the historyof the world. And normally he doesn't know it.? ——?Paulo Coelho, The Alchemist

在pubspec.yaml文件添加插件

• image_gallery_saver安裝1.5.0版本就好了，我之前安裝的1.6.6會報錯

??#?權限控制插件
??permission_handler:?5.0.1
??permission_handler_platform_interface:?^2.0.1
??#?文件保存插件
??image_gallery_saver:?1.5.0

• 記得安裝一下

flutter?pub?get

android和ios配置

ios 修改文件

• 在ios/Runner/Info.plist添加以下代碼

?NSPhotoLibraryUsageDescription
??
????NSPhotoLibraryAddUsageDescription
????請允許APP保存圖片到相冊

android 修改文件

• 在android/app/src/main/AndroidManifest.xml添加以下代碼

????<uses-permission?android:name="android.permission.INTERNET"/>
????<uses-permission?android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
????<uses-permission?android:name="android.permission.READ_EXTERNAL_STORAGE"/>

將需要生成圖片的組件用RepaintBoundary包裹

GlobalKey?globalKey?=?GlobalKey();
RepaintBoundary(
??????key:?globalKey,
??????child:Text('我要生成圖片'),
??????)

保存圖片到相冊

在點擊事件里調用這個方法就可以了

?///?保存圖片
??static?Future<void>?saveImage(GlobalKey?globalKey)?async?{
????RenderRepaintBoundary?boundary?=
????globalKey.currentContext.findRenderObject();
????var?image?=?await?boundary.toImage(pixelRatio:?6.0);
????ByteData?byteData?=?await?image.toByteData(format:?ui.ImageByteFormat.png);
????Uint8List?pngBytes?=?byteData.buffer.asUint8List();
????//?final?result?=?await?ImageGallerySaver.saveImage(pngBytes,
????//?????quality:?60,?name:?"hello");
????//?if?(result)?{
????//???print('ok');
????//???//?toast("保存成功",?wring:?false);
????//?}?else?{
????//???print('error');
????//?}

????if?(Platform.isIOS)?{
??????var?status?=?await?Permission.photos.status;
??????if?(status.isUndetermined)?{
????????Map?statuses?=?await?[
??????????Permission.photos,
????????].request();
????????saveImage(globalKey);
??????}if?(status.isGranted)?{final?result?=?await?ImageGallerySaver.saveImage(pngBytes,
????????????quality:?60,?name:?"hello");if?(result)?{
??????????print('ok');//?toast("保存成功",?wring:?false);
????????}?else?{
??????????print('error');//?toast("保存失敗");
????????}
??????}if?(status.isDenied)?{
????????print("IOS拒絕");
??????}
????}?else?if?(Platform.isAndroid)?{var?status?=?await?Permission.storage.status;if?(status.isUndetermined)?{
????????Map?statuses?=?await?[
??????????Permission.storage,
????????].request();
????????saveImage(globalKey);
??????}if?(status.isGranted)?{
????????print("Android已授權");final?result?=?await?ImageGallerySaver.saveImage(pngBytes,?quality:?60);if?(result?!=?null)?{
??????????print('ok');//?toast("保存成功",?wring:?false);
????????}?else?{
??????????print('error');//?toast("保存失敗");
????????}
??????}if?(status.isDenied)?{
????????print("Android拒絕");
??????}
????}
??}

完整demo代碼

import?'package:flutter/material.dart';
import?'package:flutter/rendering.dart';
import?'package:interviewer_app/common/component_index.dart';
//?一定要引入這三個插件
import?'package:image_gallery_saver/image_gallery_saver.dart';
import?'package:permission_handler_platform_interface/permission_handler_platform_interface.dart';
import?'package:permission_handler/permission_handler.dart';

import?'package:flutter/services.dart';
import?'dart:ui'?as?ui;
import?'dart:typed_data';
import?'dart:io';

class?ShareJob?extends?StatefulWidget?{
??const?ShareJob({Key?key,?this.searchKey})?:?super(key:?key);
??final?String?searchKey;


??@override
??State?createState()?{

????return?new?_ShareJobState();
??}
}

class?_ShareJobState?extends?State<ShareJob>?{
//?globalKey?在這里設置
??GlobalKey?globalKey?=?GlobalKey();
??Uint8List?newPngBytes;

??Widget?shareImage()?{
????return
??????RepaintBoundary(
??????key:?globalKey,
??????child:
??????Container(

????????child:
????????//?圖片
????????Row(
??????????mainAxisAlignment:?MainAxisAlignment.spaceAround,
??????????children:?[
????????????Container(
??????????????alignment:?Alignment.center,
??????????????decoration:?BoxDecoration(
????????????????color:?Color(0xFF5B9AFF),
????????????????boxShadow:[
????????????????BoxShadow(
????????????????????color:?Color(0x1A000000),
????????????????????offset:?Offset(0,?5.0),
????????????????????blurRadius:?24.0
????????????????),
??????????????????]),

??????????????width:?MediaQuery.of(context).size.width?*?0.6,

??????????????child:
??????????????Column(
????????????????children:?[
??????????????????Gaps.vGap25,
??????????????????Text('熱招職位',?style:?TextStyle(fontSize:?22,?color:?Colors.white,?fontWeight:?FontWeight.w300),),
??????????????????Gaps.vGap25,
??????????????????Container(
????????????????????margin:?EdgeInsets.only(bottom:?22,left:?15,right:?15),
????????????????????//?padding:?EdgeInsets.only(bottom:?22,left:?15,right:?15),
????????????????????alignment:?Alignment.center,
????????????????????decoration:?BoxDecoration(
????????????????????????color:?Colors.white,
????????????????????????borderRadius:?BorderRadius.circular(10.0),
????????????????????????boxShadow:[
??????????????????????????BoxShadow(
??????????????????????????????color:?Color(0x1A000000),
??????????????????????????????offset:?Offset(0,?5.0),
??????????????????????????????blurRadius:?24.0
??????????????????????????),
????????????????????????]),
????????????????????//?padding:?EdgeInsets.all(10),
????????????????????//?margin:?EdgeInsets.only(bottom:?6),
????????????????????//?width:?MediaQuery.of(context).size.width?*?0.6,
????????????????????//?height:?305,
????????????????????child:?Column(
??????????????????????children:?[
????????????????????????Gaps.vGap25,
????????????????????????Gaps.vGap10,
????????????????????????Text('測試工程師',?style:?TextStyle(fontSize:?15,?color:?Color(0xFF313753),?fontWeight:?FontWeight.w500),),
????????????????????????Gaps.vGap10,
????????????????????????Text('15k-20K?|?上海',?style:?TextStyle(fontSize:?15,?color:?Color(0xFFF4A25A),?fontWeight:?FontWeight.w500),),
????????????????????????Gaps.vGap10,
????????????????????????Text('公司名',?style:?TextStyle(fontSize:?10,?color:?Color(0xFF313753),?fontWeight:?FontWeight.w400),),
????????????????????????Gaps.vGap15,
????????????????????????Image.asset(Utils.getImgPath('checked'),
????????????????????????????width:?115.0),
????????????????????????Gaps.vGap25,
????????????????????????Text('長按查看職位詳情',?style:?TextStyle(fontSize:?9,?color:?Color(0xFF313753),?fontWeight:?FontWeight.w400),),
????????????????????????Gaps.vGap25,
??????????????????????],
????????????????????),
??????????????????),
????????????????],
??????????????),
????????????),
??????????],
????????),

??????)
????);
??}

??///?保存圖片
??static?Future<void>?saveImage(GlobalKey?globalKey)?async?{
????RenderRepaintBoundary?boundary?=
????globalKey.currentContext.findRenderObject();
????var?image?=?await?boundary.toImage(pixelRatio:?6.0);
????ByteData?byteData?=?await?image.toByteData(format:?ui.ImageByteFormat.png);
????Uint8List?pngBytes?=?byteData.buffer.asUint8List();
????//?final?result?=?await?ImageGallerySaver.saveImage(pngBytes,
????//?????quality:?60,?name:?"hello");
????//?if?(result)?{
????//???print('ok');
????//???//?toast("保存成功",?wring:?false);
????//?}?else?{
????//???print('error');
????//?}

????if?(Platform.isIOS)?{
??????var?status?=?await?Permission.photos.status;
??????if?(status.isUndetermined)?{
????????Map?statuses?=?await?[
??????????Permission.photos,
????????].request();
????????saveImage(globalKey);
??????}if?(status.isGranted)?{final?result?=?await?ImageGallerySaver.saveImage(pngBytes,
????????????quality:?60,?name:?"hello");if?(result)?{
??????????print('ok');//?toast("保存成功",?wring:?false);
????????}?else?{
??????????print('error');//?toast("保存失敗");
????????}
??????}if?(status.isDenied)?{
????????print("IOS拒絕");
??????}
????}?else?if?(Platform.isAndroid)?{var?status?=?await?Permission.storage.status;if?(status.isUndetermined)?{
????????Map?statuses?=?await?[
??????????Permission.storage,
????????].request();
????????saveImage(globalKey);
??????}if?(status.isGranted)?{
????????print("Android已授權");final?result?=?await?ImageGallerySaver.saveImage(pngBytes,?quality:?60);if?(result?!=?null)?{
??????????print('ok');//?toast("保存成功",?wring:?false);
????????}?else?{
??????????print('error');//?toast("保存失敗");
????????}
??????}if?(status.isDenied)?{
????????print("Android拒絕");
??????}
????}
??}@overrideWidget?build(BuildContext?context)?{return?new?Scaffold(
??????appBar:?AppBar(title:?Text('分享職位'),?titleSpacing:?0,?centerTitle:?true),
??????body:?SingleChildScrollView(
????????child:?Container(
??????????child:?Column(children:?[
????????????Gaps.vGap25,
????????????Row(
??????????????children:?[//?http://images.shejidaren.com/wp-content/uploads/2020/03/36365-4.png//?IconButton(//???iconSize:?22,//???icon:?const?Icon(Icons.close),//???onPressed:?(){//???},//?)
????????????????Gaps.hGap30,
????????????????Gaps.hGap10,
????????????????Gaps.hGap10,
????????????????Column(
??????????????????children:?[
????????????????????Container(
??????????????????????decoration:?new?BoxDecoration(
????????????????????????color:?Cor.roundbg_1,
????????????????????????borderRadius:?BorderRadius.circular(100),
??????????????????????),
??????????????????????padding:?EdgeInsets.all(10),
??????????????????????margin:?EdgeInsets.only(bottom:?6),
??????????????????????width:?60,
??????????????????????height:?60,
??????????????????????child:?Image.network('http://images.shejidaren.com/wp-content/uploads/2020/03/36365-4.png'),
????????????????????),
????????????????????Text('微信好友',
??????????????????????textAlign:?TextAlign.center,
??????????????????????style:?TextStyle(color:?Cor.black_1,?fontSize:?14),
????????????????????)
??????????????????],
????????????????),
????????????????Gaps.hGap30,
????????????????Gaps.hGap10,
????????????????Gaps.hGap10,
????????????????Column(
??????????????????children:?[
????????????????????Container(
??????????????????????decoration:?new?BoxDecoration(
????????????????????????color:?Cor.roundbg_1,
????????????????????????borderRadius:?BorderRadius.circular(100),
??????????????????????),
??????????????????????padding:?EdgeInsets.all(10),
??????????????????????margin:?EdgeInsets.only(bottom:?6),
??????????????????????width:?60,
??????????????????????height:?60,
??????????????????????child:?Image.network('https://www.sj520.cn/sc/ima/weixin_sj520_11.jpg'),
????????????????????),
????????????????????Text('朋友圈',
??????????????????????textAlign:?TextAlign.center,
??????????????????????style:?TextStyle(color:?Cor.black_1,?fontSize:?14),
????????????????????)
??????????????????],
????????????????),
??????????????],
????????????),
????????????Gaps.vGap20,//?灰色橫線
????????????Container(
??????????????decoration:?new?BoxDecoration(color:?Cor.roundbg_1),
??????????????width:?double.infinity,
??????????????height:?10,
????????????),
????????????Gaps.vGap15,
????????????Row(
??????????????mainAxisAlignment:?MainAxisAlignment.spaceAround,
??????????????children:?[
????????????????Text('已生成朋友圈圖片',
??????????????????textAlign:?TextAlign.center,
??????????????????style:?TextStyle(color:?Cor.black_1.withOpacity(0.65),?fontSize:?14),
????????????????),
??????????????],
????????????),
????????????Gaps.vGap15,
????????????shareImage(),
????????????Gaps.vGap15,
????????????Gaps.vGap10,
????????????Row(
??????????????mainAxisAlignment:?MainAxisAlignment.spaceAround,
??????????????children:?[
????????????????RaisedButton(
????????????????????color:?Cor.blue_1,
????????????????????highlightColor:?Colors.blue[100],
????????????????????colorBrightness:?Brightness.dark,
????????????????????splashColor:?Cor.blue_2,
????????????????????padding:?EdgeInsets.only(left:?34,right:?34),
????????????????????child:?Text("保存至相冊",
??????????????????????style:?TextStyle(color:?Colors.white,?fontSize:?14),
????????????????????),
????????????????????shape:?RoundedRectangleBorder(
????????????????????????borderRadius:?BorderRadius.circular(20.0)),
????????????????????onPressed:?()?async?{
??????????????????????print('------');
??????????????????????print(globalKey.currentContext);//?createImageFromRepaintBoundary(globalKey);//?final?g?=?createImageFromWidget(saveImage());//?print(g);
??????????????????????saveImage(globalKey);
????????????????????},
????????????????????),
??????????????],
????????????),
????????????Gaps.vGap25,
????????????Gaps.vGap25,
??????????]),
????????),
??????),
????);
??}
}

效果圖

效果圖

保存成功后可以在模擬器相冊看到

模擬器相冊

我們每一個人不管做什么，都在整個世界的歷史長河中扮演著很重要的角色，只是通常我們自己并不知道。—— JPaulo Coelho, The Alchemist

- END -▼往期精彩回顧▼js怎么點擊復制鏈接并且選中文本手把手教你如何發布系統和GitHub的oAuth登錄EventLoop面試必考，你完全會了么？Chrome調試技巧系列三Chrome調試技巧系列二Chrome的騷操作系列(一)JS預編譯JavaScript 浮點數之迷：大數危機JavaScript 浮點數之迷：0.1 + 0.2 為什么不等于 0.3？掃碼關注你點的每個贊，我都認真當成了喜歡

總結

以上是生活随笔為你收集整理的android 生成推广图片保存_flutter 如何生成图片并保存到手机相册？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。