Flutter 使用插件打开相册、相机「建议收藏」
2023-06-13 09:11:14 时间
大家好,又见面了,我是你们的朋友全栈君。
需求: image_picker的使用,点击按钮底部弹出 相册、拍照选择框,实现具体功能
1:引入插件 pubspec.yaml 增加
image_picker: ^0.7.5+2
2:android 添加androidx兼容
gradle.properties 增加
android.useAndroidX=true
android.enableJetifier=true
build 添加依赖
androidTestImplementation 'androidx.test:runner:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
testImplementation 'androidx.test:core:1.2.0'
3: ios ->Runner->info.plist添加权限说明
<key>NSCameraUsageDescription</key>
<string>这是你的自拍照</string>
<key>NSMicrophoneUsageDescription</key>
<string>用于音频插件</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>用于相册选择插件</string>
<key>UIBackgroundModes</key>
<array>
<string>remote-notification</string>
</array>
4:编写Ui 添加一个浮动按钮,增加点击事件弹出相册/拍照选择框具体如下:
floatingActionButton: FloatingActionButton(
child: Center(
child: Text(
"点我",
style: TextStyle(color: Colors.white),
)),
backgroundColor: Colors.blueAccent,
elevation: 0.2,
onPressed: () {
//点击事件
showPicker();
},
)
//弹出选择相册/拍照对话框
showPicker() {
//底部弹出
showModalBottomSheet(
context: context,
builder: (BuildContext con) => Container(
height: 160,
padding: EdgeInsets.all(20),
color: Colors.white,
child: Expanded(
child: ListView(
children: [createItem(true, "拍照"), createItem(false, "相册")],
),
),
));
}
//创建item
Widget createItem(bool state, String name) {
return GestureDetector(
onTap: () {
//点击事件处理
openPicker(state);
},
child: ListTile(
leading: Icon(state ? Icons.camera : Icons.image),
title: Text(name),
));
}
//使用imagePicker异步打开拍照 、相册
openPicker(bool state) async {
//销毁底部弹出框
Navigator.pop(context);
var picker = ImagePicker();
//根据状态标识决定打开相机还是相册
var future = await picker.getImage(
source: state ? ImageSource.camera : ImageSource.gallery);
setState(() {
//通过setstate 通知重绘更新
file = File(future.path);
});
}
拿到了图片,那么就差左后一步了,实现body 添加Image 显示图片,代码如下:
body: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(20),
//没有图片时候显示占位图
child: file == null ? Icon(Icons.image,) : Image.file(file),
)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/193177.html原文链接:https://javaforall.cn
相关文章
- 写给flutter开发者的vscode快捷键、插件和设置
- Flutter 绘制集录 | 第四画 - 风车
- 【Flutter 绘制探索】进度与裁剪 - CustomClipper 的使用
- Flutter Web - 让 Web 与 APP UI 一致的另一种可能
- dart-flutter实现页面跳转
- 【错误记录】Flutter 环境安装相关问题 ( 执行 flutter doctor 命令后续错误处理 )
- 【Flutter】Flutter 打开第三方应用 ( url_launcher 插件搜索与安装 | url_launcher 插件官方示例 | 打开浏览器 | 打开第三方应用 )
- 【错误记录】Flutter 报错 ( Could not read script ‘xxxflutter_toolsgradleapp_plugin_loader.gradle‘ )
- 【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
- 【错误记录】Android Studio 创建 Flutter 应用被卡住 ( 更新 Flutter 插件 | 命令行创建 | 断网 )
- 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
- 【错误记录】Flutter 混合开发报错 ( Android 端与 Flutter 端 EventChannel 初始化顺序错误导致无法通信 | EventChannel 通信流程 )
- 【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
- 【Flutter】开发 Flutter 包和插件 ( Flutter 包和插件简介 | 创建 Flutter 插件 | 创建 Dart 包 )
- 【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )
- flutter系列之:如何自定义动画路由