Flutter相机功能插件story_camera的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter相机功能插件story_camera的使用

开始使用

作为camera依赖项,你需要编辑iOS的info.plist文件和Android的android/app/build.gradle文件。

在iOS中,如果以文本形式编辑info.plist,你应该添加以下内容:

<key>NSCameraUsageDescription</key>
<string>你的使用描述</string>
<key>NSMicrophoneUsageDescription</key>
<string>你的使用描述</string>

在Android中,将android/app/build.gradle文件中的最小Android SDK版本更改为21(或更高):

minSdkVersion 21

功能

示例:后置摄像头在模拟器中的效果

后置摄像头

示例:前置摄像头在模拟器中的效果

前置摄像头

使用方法

File? file;

StoryCamera(
  onImageCaptured: (value) {
    file = File(value.path);
    print(file!.path);
  }, 
  onVideoRecorded: (value) {
    file = File(value.path);
    print(file!.path);
  }, 
  onClosePressed: () {
    // 最常见的用法
    // Navigator.pop(context);
  },
  
  // 可选参数
  iconsColor: Colors.green,
  recordingIconColor: Colors.red
);

完整示例代码

以下是一个完整的示例代码,展示了如何使用story_camera插件来拍摄照片和录制视频。

import 'dart:io';

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

void main() => runApp(MyApp());

// 忽略:必须是不可变的
class MyApp extends StatelessWidget {
  File? file;

  MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StoryCamera(
      onImageCaptured: (value) {
        file = File(value.path);

        print(file);

        Navigator.push(context,
            MaterialPageRoute(builder: (_) => FileContent(file: file!)));
      },
      onVideoRecorded: (value) {
        file = File(value.path);

        print(file);

        // 使用你最喜欢的视频播放器来展示它。
      },
      // onClosePressed: () => Navigator.pop(context),
    );
  }
}

// 示例:显示由相机拍摄的照片
class FileContent extends StatelessWidget {
  final File file;

  const FileContent({super.key, required this.file});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
        height: double.infinity,
        width: double.infinity,
        child: Image.file(file));
  }
}

更多关于Flutter相机功能插件story_camera的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter相机功能插件story_camera的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter应用中使用story_camera插件来实现相机功能的示例代码。story_camera是一个功能强大的Flutter插件,用于集成相机功能,支持实时滤镜、录制视频和拍照等功能。

首先,你需要在pubspec.yaml文件中添加story_camera依赖:

dependencies:
  flutter:
    sdk: flutter
  story_camera: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是完整的代码示例,展示如何在Flutter中使用story_camera插件:

1. 导入必要的包

在你的Dart文件中(例如main.dart),导入story_camera包:

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

2. 创建相机页面

创建一个相机页面,使用StoryCamera小部件来显示相机视图:

class CameraPage extends StatefulWidget {
  @override
  _CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
  late StoryCameraController cameraController;
  late List<Filter> filters;

  @override
  void initState() {
    super.initState();
    cameraController = StoryCameraController();
    filters = [
      Filter(name: 'Normal', filterType: FilterType.normal),
      Filter(name: 'Sepia', filterType: FilterType.sepia),
      // 添加更多滤镜...
    ];
    cameraController.initialize().then((_) {
      if (mounted) {
        setState(() {});
      }
    });
  }

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

  void changeFilter(int index) {
    cameraController.setFilter(filters[index].filterType);
  }

  void captureImage() async {
    final path = await cameraController.captureImage();
    print('Captured image path: $path');
    // 这里可以处理图片路径,例如显示图片或保存到相册
  }

  void startRecording() async {
    final path = await cameraController.startRecording();
    print('Started recording video at: $path');
    // 这里可以处理视频路径,例如显示视频或保存到相册
  }

  void stopRecording() async {
    final path = await cameraController.stopRecording();
    print('Stopped recording video at: $path');
    // 这里可以处理视频路径,例如显示视频或保存到相册
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera Page'),
      ),
      body: Column(
        children: [
          Expanded(
            child: cameraController.isInitialized
                ? StoryCameraView(controller: cameraController)
                : Container(color: Colors.grey),
          ),
          SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: filters.map((filter) => GestureDetector(
              onTap: () => changeFilter(filters.indexOf(filter)),
              child: Chip(
                label: Text(filter.name),
                selectedColor: Theme.of(context).primaryColor,
                selected: filters.indexOf(filter) == filters
                    .indexWhere((f) => f.filterType == cameraController.currentFilter),
              ),
            )).toList(),
          ),
          SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: captureImage,
                child: Text('Capture Image'),
              ),
              SizedBox(width: 16),
              ElevatedButton(
                onPressed: startRecording,
                child: Text('Start Recording'),
              ),
              SizedBox(width: 16),
              ElevatedButton(
                onPressed: stopRecording,
                child: Text('Stop Recording'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

3. 运行应用

在你的主文件中(例如main.dart),设置路由以导航到相机页面:

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

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

注意事项

  1. 确保在AndroidManifest.xmlInfo.plist文件中添加了相机权限。
  2. 根据需要处理图片和视频的保存和显示。
  3. 根据需要添加更多滤镜和功能。

上述代码展示了如何在Flutter应用中使用story_camera插件实现基本的相机功能,包括实时滤镜、拍照和录像。你可以根据实际需求进一步扩展和优化代码。

回到顶部