Flutter计时拍照插件flutter_timer_camera的使用

Flutter计时拍照插件flutter_timer_camera的使用

Flutter计时拍照插件flutter_timer_camera

一个允许你在Flutter应用中打开相机并带计时逻辑拍照的插件。

Android iOS
支持 SDK 21+ iOS 11.0+

我们只支持这些版本,因为此插件采用了camera插件。

特性

  • 直接从Flutter应用中打开自定义相机。
  • 设置延时拍照。
  • 切换前后摄像头。

安装

在你的pubspec.yaml文件中添加flutter_timer_camera作为依赖项。

dependencies:
  flutter_timer_camera: ^1.0.3

iOS

ios/Runner/Info.plist中添加相机使用描述。

<key>NSCameraUsageDescription</key>
<string>描述为什么你使用相机访问</string>

Android

将最小SDK版本改为至少21。

minSdkVersion 21

使用

import 'package:flutter_timer_camera/flutter_timer_camera.dart';

.
.
.

ElevatedButton(
  onPressed: () {
    showTimerCamera(
      context: context,
      onSubmit: (Xfile? capturedImage) {
        setState(() {
          currentImage = capturedImage;
        });
      },
    );
  },
  child: const Text('打开相机'),
),

showTimerCamera参数

参数 描述
BuildContext context 显示底部弹窗的BuildContext。
OnCapturedImageCallback onSubmit 捕获图像时触发的回调函数。
bool enableDrag = false 是否可以拖动底部弹窗,默认为false。
VoidCallback? onCameraAccessDenied 处理未授权相机访问的回调。
BoxFit? imageFit 捕获图像在相机视图边界内的适应方式。
Widget? backButtonOnNormal 正常状态下后退按钮的自定义组件。
Widget? backButtonOnCaptured 捕获图像状态下的后退按钮自定义组件。
Widget? switchCameraButton 切换相机按钮的自定义组件。
ButtonStyle? switchCameraButtonStyle 切换相机按钮的样式。
Alignment? captureButtonAlignment 捕获按钮的对齐方式。
Widget? onNormalButton 正常状态下捕获按钮的自定义组件。
Widget? onCountingButton 倒计时期间捕获按钮的自定义组件。
Widget? onCapturedButton 捕获图像状态下的捕获按钮自定义组件。
Alignment? timerOptionAlignment 倒计时选项的对齐方式。
TimerOptionStyleParamsModel? timerOptionStyleParamsModel 倒计时选项的样式参数。
TextStyle? counterTextStyle 倒计时文本的样式。
List<TimerOption> timerOptions 拍照时使用的倒计时选项列表。
double? captureButtonPaddingHeight 捕获按钮距离底部的内边距高度。
double? timerOptionPaddingHeight 倒计时选项距离捕获按钮的内边距高度。
Alignment? counterTextAlignment 倒计时文本的对齐方式。
EdgeInsetsGeometry? actionButtonPadding 动作按钮的内边距。
int defaultTimerOptionIndex = 0 默认选中的倒计时选项索引。
bool useSafeArea = true 是否尊重安全区域插件,默认为true。
bool isDismissble = true 底部弹窗是否可关闭,默认为true。
bool useRootNavigator = false 导航时是否使用根导航器,默认为false。

示例代码

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_timer_camera/flutter_timer_camera.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: _Home(),
    );
  }
}

class _Home extends StatefulWidget {
  const _Home({Key? key}) : super(key: key);

  [@override](/user/override)
  State<_Home> createState() => _HomeState();
}

class _HomeState extends State<_Home> {
  XFile? currentImage;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('定时相机'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                showTimerCamera(
                  context: context,
                  onSubmit: (XFile? capturedImage) {
                    setState(() {
                      currentImage = capturedImage;
                    });
                  },
                );
              },
              child: const Text('打开相机 1'),
            ),
            ElevatedButton(
              onPressed: () {
                showTimerCamera(
                  context: context,
                  defaultTimerOptionIndex: 1,
                  timerOptions: [
                    TimerOption(label: '零秒', startCounter: 0),
                    TimerOption(label: '5秒', startCounter: 5),
                    TimerOption(label: '8秒', startCounter: 8),
                  ],
                  onSubmit: (capturedImage) {
                    setState(() {
                      currentImage = capturedImage;
                    });
                  },
                );
              },
              child: const Text('打开相机 2'),
            ),
            currentImage == null
                ? const SizedBox.shrink()
                : SizedBox(
                    width: 300,
                    height: 300,
                    child: Image.file(File(currentImage!.path)),
                  ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter计时拍照插件flutter_timer_camera的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter计时拍照插件flutter_timer_camera的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用Flutter计时拍照插件flutter_timer_camera的代码案例。这个插件允许你在Flutter应用中实现定时拍照功能。

首先,确保你的pubspec.yaml文件中已经添加了flutter_timer_camera依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_timer_camera: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

接下来是一个简单的示例代码,展示如何使用flutter_timer_camera插件进行计时拍照:

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:flutter_timer_camera/flutter_timer_camera.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CameraScreen(),
    );
  }
}

class CameraScreen extends StatefulWidget {
  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  late CameraController _controller;
  late FlutterTimerCamera _timerCamera;
  final List<CameraDescription> _cameras = [];

  @override
  void initState() {
    super.initState();
    availableCameras().then((availableCameras) {
      _cameras.addAll(availableCameras);
      if (_cameras.isNotEmpty) {
        _controller = CameraController(_cameras.first, ResolutionPreset.medium);
        _controller.initialize().then((_) {
          if (!mounted) {
            return;
          }
          setState(() {});
          _startTimerCamera();
        });
      }
    }).catchError((err) {
      print('Error: ${err.message}');
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    _timerCamera.stop();
    super.dispose();
  }

  void _startTimerCamera() {
    _timerCamera = FlutterTimerCamera(
      cameraController: _controller,
      interval: Duration(seconds: 5), // 每5秒拍一张照片
      onImageCaptured: (File imageFile) {
        print('Image captured: ${imageFile.path}');
        // 在这里你可以处理拍摄的照片,比如保存到某个位置或者显示给用户
      },
    );

    _timerCamera.start();
  }

  @override
  Widget build(BuildContext context) {
    if (!_controller.value.isInitialized) {
      return Container();
    }
    return Scaffold(
      appBar: AppBar(
        title: Text('计时拍照示例'),
      ),
      body: Center(
        child: CameraPreview(_controller),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 停止计时拍照
          _timerCamera.stop();
          setState(() {}); // 更新UI状态
        },
        tooltip: '停止拍照',
        child: Icon(Icons.stop),
      ),
    );
  }
}

代码解释:

  1. 依赖导入:首先导入flutter, camera, 和 flutter_timer_camera包。
  2. 主函数MyApp类作为应用的入口。
  3. CameraScreen
    • 初始化相机控制器CameraController
    • 获取可用的相机列表,并选择第一个相机进行初始化。
    • 初始化FlutterTimerCamera对象,并设置拍照间隔和照片捕获回调。
  4. UI构建
    • 使用CameraPreview小部件显示相机预览。
    • 添加一个浮动操作按钮(FAB),用于停止计时拍照。

注意事项:

  • 确保在AndroidManifest.xmlInfo.plist中配置了相机权限。
  • 这个示例假设你已经在你的项目中添加了camera插件的依赖,因为flutter_timer_camera依赖于它。
  • 定时拍照的间隔可以根据需求进行调整。

希望这个示例代码对你有所帮助!

回到顶部