flutter项目中 advance_image_picker 组件使用

2023-10-08 20:30
文章标签 使用 组件 项目 picker image flutter advance

本文主要是介绍flutter项目中 advance_image_picker 组件使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、说明

Advance_image_picker 是flutter 插件，用于从Android 和 ios 图像库中选择多张图片，使用相机拍摄新照片，并对其进行编辑。

下图为最终效果：
在这里插入图片描述
这里有个bug ，在连续多测按 旋转摄像头时，程序会出现卡顿的情况。

二、使用方式

IOS ：
将这些设置添加到 ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>App need your agree, can visit your album</string>

Android ：
在您的android/app/build.gradle文件中将最低 Android sdk 版本更改为 21（或更高）。
将活动和使用权限添加到您的AndroidManifest.xml，就像下一步一样。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="vn.weta.freemarimagepickerexample"><applicationandroid:name="io.flutter.app.FlutterApplication"android:label="freemarimagepicker_example"android:requestLegacyExternalStorage="true"android:icon="@mipmap/ic_launcher"><activityandroid:name="com.yalantis.ucrop.UCropActivity"android:screenOrientation="portrait"android:theme="@style/Theme.AppCompat.Light.NoActionBar"/></application><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.CAMERA" />
</manifest>

添加到 pubspec
flutter项目的 pubspec.yaml 中添加依赖：

dependencies:advance_image_picker: $latest_version

三、项目代码

最近自己动手做的项目是通过Getx 开发。插件测试代码分为 view 端代码和 controller 端代码，这里一并贴出

view 端代码：


class ImagePickerScreen extends GetView<ImagePickerController> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Obx(() => Text(controller.pageName.value,style: TextStyle(color: Theme.of(context).appBarTheme.titleTextStyle!.color,),),),centerTitle: true,),body: _buildBody(context),);}Widget _buildBody(BuildContext context) {return SingleChildScrollView(child: SafeArea(child: Column(mainAxisAlignment: MainAxisAlignment.start,children: [Container(child: ElevatedButton(onPressed: () {controller.getImages();},child: Text('上传图标'),),),_buildImages(context),],),),);}Widget _buildImages(BuildContext context) {return Obx(() => GridView.builder(itemCount: controller.imgObjs.length,shrinkWrap: true,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4, mainAxisSpacing: 2),itemBuilder: (BuildContext context, int index) {return Padding(padding: EdgeInsets.all(2),child: Image.file(File(controller.imgObjs[index]),height: 80,fit: BoxFit.cover,),);},),);}
}

contoller 部分代码：
ApiRepository 用于网络请求 ，这里通过构造器依赖注入。由于测试过程中，没有用到网络请求，这部分省略。

class ImagePickerController extends GetxControllerwith GetSingleTickerProviderStateMixin {final pageName = "imagePicker".obs;final ApiRepository apiRepository;late ImagePickerConfigs imageConfig;RxList<String> imgObjs = <String>[].obs;CommodityAddController({required this.apiRepository});@overridevoid onInit() {imageConfig = ImagePickerConfigs();imageConfig.appBarTextColor = Colors.white;imageConfig.appBarBackgroundColor = Colors.black54;imageConfig.stickerFeatureEnabled = false; // ON/OFF featuresimageConfig.translateFunc = (name, value) => name.tr;imageConfig.iconCamera = FontAwesomeIcons.camera;imageConfig.doneButtonStyle = DoneButtonStyle.outlinedButton;imageConfig.adjustFeatureEnabled = false;imageConfig.externalImageEditors['external_image_editor_1'] = EditorParams(title: 'external_image_editor_1',icon: Icons.edit_rounded,onEditorEvent: ({required BuildContext context,required File file,required String title,int maxWidth = 1080,int maxHeight = 1920,int compressQuality = 90,ImagePickerConfigs? configs}) async =>navigator!.push(MaterialPageRoute(fullscreenDialog: true,builder: (context) => ImageEdit(file: file,title: title,maxWidth: maxWidth,maxHeight: maxHeight,configs: configs),),),);imageConfig.imagePreProcessingBeforeEditingEnabled = true;imageConfig.filterFeatureEnabled = false;imageConfig.imagePreProcessingEnabled = true;imageConfig.cropFeatureEnabled = false;super.onInit();}void getImages() async {List<ImageObject> objects = await navigator!.push(MaterialPageRoute(builder: (_) {return ImagePicker(maxCount: 5);},),);if (objects.length > 0) {imgObjs.addAll(objects.map((e) => e.modifiedPath).toList());}}
}

四、最后注意事项

ImagePickerConfigs 为imagePicker 配置信息。该插件在弹出图片选择界面后，显示语言默认 英文显示。

imageConfig.translateFunc = (name, value) => name.tr; 用于配置 imagePicker语言国际化。

getx 多语言配置：

  1. 文件结构：
    在这里插入图片描述
  2. 文件内容：

translation_service.dart：

import 'dart:ui';import 'package:get/get.dart';import 'en_US.dart';
import 'zh_CN.dart';class TranslationService extends Translations {static Locale? get locale => Get.deviceLocale;static final fallbackLocale = Locale('zh', 'CN');@overrideMap<String, Map<String, String>> get keys => {'zh_CN': zh_CN,'en_US': en_US,};
}

en_US.dart

const Map<String, String> en_US = {'name': 'name','image_picker_camera_title': 'camera','image_picker_album_title': 'album','image_picker_select_button_title': 'select','image_picker_select_images_title': 'selected images count:','image_picker_select_images_guide': 'drag images for sorting list...:','image_picker_exposure_title':'exposure','image_picker_exposure_locked_title':'locked','image_picker_exposure_auto_title':'auto',
};

zh_CN.dart

const Map<String, String> zh_CN = {'name': '用户名','image_picker_camera_title': '相机','image_picker_album_title': '相册','image_picker_select_button_title': '确定','image_picker_select_images_title': '已选择:','image_picker_select_images_guide': '拖动图片重新排序:','image_picker_exposure_title': '滤镜','image_picker_exposure_locked_title': '锁定','image_picker_exposure_auto_title': '自动','image_picker_confirm': '确定','image_picker_confirm_delete': '是否要删除这张照片','no': '否','yes': '是','image_picker_exit_without_selecting': '是否要退出而不选择图像？','image_picker_preview_title': '预览','image_picker_image_edit_title': '编辑','image_picker_image_edit_contrast': '对比度','image_picker_image_edit_brightness': '亮度','image_picker_image_edit_saturation': '饱和度','image_picker_image_filter_title': '滤镜','image_picker_confirm_reset_changes': '是否重置更改？',
};

main.dart 中 需要 传递参数给GetMaterialApp来定义语言和翻译。

return GetMaterialApp(translations: Messages(), // 你的翻译locale: Locale('zh', 'CN'), // 将会按照此处指定的语言翻译fallbackLocale: Locale('en', 'US'), // 添加一个回调语言选项，以备上面指定的语言翻译不存在
);

项目中的配置：
在这里插入图片描述

这篇关于flutter项目中 advance_image_picker 组件使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/167806。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2