Flutter相机网格布局插件camera_grid的使用

Flutter相机网格布局插件camera_grid的使用

大家好，Flutter爱好者们！👋 欢迎来到Gyro Camera Grid插件。这个小巧的组件为你的相机视图添加了一个响应式的网格覆盖层，并且可以根据设备的方向进行调整。是不是很酷？😎

特性

• 响应式网格覆盖层，跟随设备方向变化
• 平滑地在纵向和横向模式之间过渡
• 可自定义网格颜色、强调色和线条宽度
• 可调节的吸附行为阈值
• 易于启用或禁用，不会造成性能负担
• 可选子组件，增加灵活性

截图

开始使用

首先，让我们将这个包添加到你的项目中：

dependencies:
  camera_grid: ^0.0.2

别忘了运行 flutter pub get！🏃‍♂️💨

如何使用

使用Gyro Camera Grid就像吃派一样简单！你可以选择是否使用子组件。以下是几个示例：

使用camera_awesome包

import 'package:flutter/material.dart';
import 'package:camera_awesome/camera_awesome.dart';
import 'package:camera_grid/camera_grid.dart';

CameraAwesomeBuilder.custom(
  saveConfig: SaveConfig.photo(),
  builder: (state, preview) => state.when(
    onPreparingCamera: (preparingCameraState) => Container(
      color: Colors.black,
    ),
    onPreviewMode: (previewCameraState) {
      return previewCameraState.focus();
    },
    onPhotoMode: (photoCompleteState) {
      return const CameraGrid();
    },
  ),
)

使用camera包

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

CameraPreview(
  controller,
  child: const CameraGrid(),
)

自定义

想要个性化它吗？没问题！以下是可定制的选项：

• child: 可选子组件（默认：null）
• gridColor: 网格线的颜色（默认：白色）
• accentColor: 对齐框的颜色（吸附时）（默认：蓝色）
• gridLineWidth: 网格线的宽度（默认：1.0）
• movingBorderRadius: 移动中的对齐框边角半径（默认：4.0）
• morphDuration: 形变动画的持续时间（默认：150ms）
• morphCurve: 形变动画的曲线（默认：Curves.easeOutQuad）
• snapThreshold: 吸附阈值（默认：1.5度）
• isGridEnabled: 切换网格覆盖层的开启/关闭（默认：true）

0.0.2版本新特性

• 使子组件成为可选项，增加了更多灵活性
• 通过避免不必要的初始化提高了性能
• 实现了更简洁的切换机制，使用Dart 3的switch表达式
• 增强了自定义选项

为什么选择这个包？

你可能会想，“市面上已经有什么类似的了吗？” 说实话，我不确定！ 😅 我创建这个包是因为我在一个项目中需要它，我想，“也许别人也能用得上！”

这是一个基于Stack的小巧解决方案，没有什么特别复杂的东西。但有时候，简单的东西就是我们所需要的，不是吗？ 🎯

贡献

发现了一个bug？有改进的想法？请随时贡献！毕竟，我们都在一起努力。🌟

1. 分叉项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开Pull Request

许可证

该项目采用MIT许可证 - 详情见 LICENSE 文件。

祝大家编码愉快，愿你们的相机网格始终完美对齐！ 📸✨

示例代码

Camera Grid 示例

这个示例展示了如何使用Camera Grid包与Flutter的camera插件结合使用。

开始使用

1. 确保你的机器上安装了Flutter。
2. 克隆此仓库或复制示例代码。
3. 运行 flutter pub get 安装依赖项。
4. 连接设备或启动模拟器。
5. 运行 flutter run 启动应用。

代码示例

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

import 'widgets/camera_wrapper.dart';

late List<CameraDescription> _cameras;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  _cameras = await availableCameras();
  runApp(const CameraApp());
}

class CameraApp extends StatefulWidget {
  const CameraApp({super.key});

  @override
  State<CameraApp> createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  late CameraController controller;

  @override
  void initState() {
    super.initState();
    controller = CameraController(_cameras[0], ResolutionPreset.max);
    controller.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    }).catchError((Object e) {
      if (e is CameraException) {
        switch (e.code) {
          case 'CameraAccessDenied':
            // 处理访问错误
            break;
          default:
            // 处理其他错误
            break;
        }
      }
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return Container();
    }
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: CameraWrapper(
          child: CameraPreview(
            controller,
            child: const CameraGrid(),
          ),
        ),
      ),
    );
  }
}

这个示例初始化了相机，显示了一个相机预览，并在其上叠加了Camera Grid。

依赖项

确保在 pubspec.yaml 中添加这些依赖项：

dependencies:
  flutter:
    sdk: flutter
  camera: ^latest_version
  camera_grid: ^latest_version