一、浮动按钮及点击事件

一般使用 Scaffold 组件作为界面的根布局组件 , Scaffold 组件的 floatingActionButton 属性即可设置浮动按钮 , FloatingActionButton 组件 ;

// 根组件
Scaffold(// 设置标题组件appBar: ,// 设置页面主体元素组件 body: ,// 创建浮动按钮 FloatingActionButton 组件 , 并设置给 floatingActionButton 字段 ; floatingActionButton: FloatingActionButton(),
)

浮动按钮点击事件 : 浮动按钮点击事件就是 FloatingActionButton 组件的 onPressed 属性值 , 设置一个 VoidCallback? 类型的值 ,

FloatingActionButton(// 浮动按钮点击事件 onPressed: () {}
)

VoidCallback 就是参数和返回值都是空的函数 ; onPressed: () {} 括号中的参数为空 , 返回值也为空 ;

/// Signature of callbacks that have no arguments and return no data.
typedef VoidCallback = void Function();

二、底部显示按钮组件

调用 showModalBottomSheet 方法 , 即可弹出底部按钮组件 , 该组件由开发者定义 , 可以是任何组件 , 如 Column ;

这里在底部显示的是一个 Container 组件 , Container 组件内部包含了一个 Column 组件 ;

/// 浮动按钮点击事件
/// 点击浮动按钮 , 弹出一个菜单
/// 菜单有两个按钮 , 分别是 拍照 / 选择图片
showModalBottomSheet(context: context,builder: (context) {return Container(// 设置该弹出的组件高度 200 像素height: 200,child: Column(children: <Widget>[// 拍照按钮GestureDetector(),// 相册按钮GestureDetector(),],),);});

showModalBottomSheet 方法传入两个必要的参数 , BuildContext context 是上下文对象 , WidgetBuilder builder 是显示的底部布局组件 ;

Future<T?> showModalBottomSheet<T>({required BuildContext context,required WidgetBuilder builder,Color? backgroundColor,double? elevation,ShapeBorder? shape,Clip? clipBehavior,Color? barrierColor,bool isScrollControlled = false,bool useRootNavigator = false,bool isDismissible = true,bool enableDrag = true,RouteSettings? routeSettings,AnimationController? transitionAnimationController,
})

三、手势检测器组件

这里按钮点击使用 GestureDetector 组件 , 监听器 onTap 方法 , 用户点击时 , 调用 getImageFromCamera 方法 ;

GestureDetector(child: ListTile(// 相机图标leading: Icon(Icons.camera_alt),title: Text("拍照"),/// 按钮点击事件onTap: (){// 调用 getImage 方法 , 调出相机拍照getImageFromCamera();},),
),

四、image_picker 完整代码示例

代码示例 :

import 'dart:io';import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: '拍照示例'),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {/// 需要导入 dart:io 库/// import 'dart:io';File _image;// 图片获取引擎final picker = ImagePicker();/// 获取摄像头图像的方法Future getImageFromCamera() async {/// 菜单按钮消失Navigator.pop(context);/// 需要导入 image_picker.dart 包/// import 'package:image_picker/image_picker.dart';final pickedFile =await picker.getImage(source: ImageSource.camera);setState(() {if (pickedFile != null) {_image = File(pickedFile.path);} else {print('No image selected.');}});}/// 获取相册中的图像Future getImageFromGallery() async {/// 菜单按钮消失Navigator.pop(context);/// 需要导入 image_picker.dart 包/// import 'package:image_picker/image_picker.dart';final pickedFile =await picker.getImage(source: ImageSource.gallery);setState(() {if (pickedFile != null) {_image = File(pickedFile.path);} else {print('No image selected.');}});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: _image == null ? Text('No image selected.') : Image.file(_image),),floatingActionButton: FloatingActionButton(onPressed: () {/// 浮动按钮点击事件/// 点击浮动按钮 , 弹出一个菜单/// 菜单有两个按钮 , 分别是 拍照 / 选择图片showModalBottomSheet(context: context,builder: (context) {return Container(// 设置该弹出的组件高度 200 像素height: 200,child: Column(children: <Widget>[// 拍照按钮GestureDetector(child: ListTile(// 相机图标leading: Icon(Icons.camera_alt),title: Text("拍照"),/// 按钮点击事件onTap: (){// 调用 getImage 方法 , 调出相机拍照getImageFromCamera();},),),// 相册按钮GestureDetector(child: ListTile(// 相册图标leading: Icon(Icons.photo_library_outlined),title: Text("相册"),/// 按钮点击事件onTap: (){// 调用 getImageFromGallery 方法 , 调出相册getImageFromGallery();},),),],),);});},tooltip: 'Pick Image',child: Icon(Icons.add_a_photo),),);}
}

运行效果 :

五、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_photo ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15852074 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )相关推荐

微信小程序拍照/从相册中选择图片
微信小程序提供的众多API中,wx.chooseImage函数就是用来访问手机相册或摄像头的.调用该函数后,界面下方会呼出一个菜单,可以分别选择进入相册挑选已有照片或是打开摄像头进行拍照: 我们往WX ...
Andorid 拍照、从相册中选择图片兼容7.0uri
其中点击事件如下: 图片: Intent intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Med ...
php拍照从手机相册中选择,微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例...
本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览 ...
Android中拍照(相册中选择)并上传图片功能（包括动态获取权限）
作为新手小白,为了实现这个拍照和相册选取图片并上传功能,确实花费了很多时间,因为实现不容易,所以记录下来,一和大家分享,二为之后学习做个备忘. 一.实现效果二. 整体思路 Android手机客户端, ...
Android7.0以上如何获取头像（拍照或者从相册中选择）
大概的流程动态权限管理创建布局文件,这里不多说了拍照的实现 2.1创建存放图片的文件夹 2.2将文件夹路径转换为uri 2.3隐式启动相机的Activity,uri作为intent的一个参数. ...
php拍照从手机相册中选择,Android获取图片：拍照和从相册中选择
概述在Android开发中获取图片主要包括如下两种方式: 打开相机拍照从图库中选择图片一.打开相机拍照打开相机拍照主要包括如下几个部分: 权限申请打开摄像头拍照后传回数据处理 1. 权限申 ...
在Activity中响应ListView内部按钮的点击事件的两种方法
转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...
【Qt】Qt 开发桌面程序 ( Qt 版本 5.14.2 | 编辑 Qt 桌面按钮控件 | 修改按钮文本 | 为按钮添加点击事件 | 系统调用 | 去掉系统调用命令窗口 )
文章目录一.添加按钮控件二.修改按钮文本三.为按钮添加点击事件 ( 弹出对话框 ) 四.为按钮添加点击事件 ( 打开记事本 ) 五.为按钮添加点击事件 ( 打开计算器 ) 六.去掉系统调用时弹出 ...
【Visual Studio 2019】创建 MFC 桌面程序 ( 安装 MFC 开发组件 | 创建 MFC 应用 | MFC 应用窗口编辑 | 为按钮添加点击事件 | 修改按钮文字 | 打开应用 )
文章目录一.安装 MFC 开发组件二.创建 MFC 应用三.MFC 应用窗口编辑四.为按钮添加点击事件五.修改按钮文字六.打开系统其它应用七.博客源码一.安装 MFC 开发组件打开 ...

【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )

文章目录