文章目录

一、浮动按钮及点击事件二、底部显示按钮组件三、手势检测器组件四、image_picker 完整代码示例五、相关资源

一、浮动按钮及点击事件

一般使用 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/packagesFlutter 开发文档 :/docs( 强烈推荐 )官方 GitHub 地址: /flutterFlutter 中文社区 :/Flutter 实用教程 :/docs/cookbookFlutter CodeLab :https://codelabs.flutter-/Dart 中文文档 :/Dart 开发者官网 :https://api.dart.dev/Flutter 中文网 ( 非官方 , 翻译的很好 ) :https://flutterchina.club/ , /docs/Flutter 相关问题 :https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 :/han120/flutter_photo ( 随博客进度一直更新 , 有可能没有本博客的源码 )

博客源码快照 :/download/han120/15852074 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

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