Flutter相机与文件管理插件camera_with_files的使用

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

Flutter相机与文件管理插件camera_with_files的使用

Whatsapp类似界面

N|Solid

camera_with_files插件在Android、iOS和Web上均可工作。

  • 多张图片选择。
  • 单张图片选择。
  • 摄像头切换。
  • 闪光灯功能。

使用方法

导航到CameraApp页面，选择图片或从摄像头拍摄照片后，将返回选中的文件列表。

多张图片选择

List<File> data = await Navigator.of(context).push(MaterialPageRoute<List<File>>(
  builder: (BuildContext context) => const CameraApp(
    // 多张图片选择标志
    isMultiple: true,
  ),
));

单张图片选择

List<File> data = await Navigator.of(context).push(MaterialPageRoute<List<File>>(
  builder: (BuildContext context) => const CameraApp(
    // 单张图片选择标志
    isMultiple: false,
  ),
));

完整示例代码

以下是完整的示例代码，展示了如何使用camera_with_files插件来实现多张图片选择的功能：

import 'dart:io';
import 'package:camera_with_files/camera_with_files.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MaterialApp(home: MyApp()));
}

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

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<File> files = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 显示已选择的图片
              if (files.isNotEmpty)
                ...files.map<Image>((ele) {
                  if (kIsWeb) {
                    return Image.network(ele.path); // 网页端显示图片
                  }
                  return Image.file(ele); // 移动端显示图片
                }).toList(),
              // 选择图片的按钮
              TextButton(
                onPressed: () async {
                  var data = await Navigator.of(context).push(
                    MaterialPageRoute<List<File>>(
                      builder: (BuildContext context) => const CameraApp(
                        isMultiple: true, // 设置为多张图片选择
                        isSimpleUI: true, // 使用简单UI
                        compressedSize: 100000, // 压缩大小限制
                      ),
                    ),
                  );
                  if (data != null) {
                    setState(() {
                      files = data;
                    });
                  }
                },
                child: const Text("点击选择图片"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用camera_with_files插件来实现相机拍照和文件管理的示例代码。camera_with_files插件结合了相机和文件存储功能，方便用户拍照并管理这些照片。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加camera_with_files依赖：

dependencies:
  flutter:
    sdk: flutter
  camera_with_files: ^x.y.z  # 请使用最新版本号

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

2. 请求权限

由于拍照和文件访问需要权限，你需要在AndroidManifest.xml和Info.plist中添加相应的权限请求。

Android (AndroidManifest.xml)

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS (Info.plist)

<key>NSCameraUsageDescription</key>
<string>App needs access to the camera</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>App needs access to the photo library</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>App needs access to the photo library</string>

3. 初始化插件和拍照

在你的Flutter项目中，你可以使用CameraWithFiles插件来初始化相机并拍照。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:camera_with_files/camera_with_files.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 CameraWithFilesController _controller;

  @override
  void initState() {
    super.initState();
    _controller = CameraWithFilesController();
    _controller.initialize().then((_) {
      if (!mounted) return;
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera with Files'),
      ),
      body: _controller.value.isInitialized
          ? Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Center(
                  child: CameraPreview(_controller),
                ),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () async {
                    final XFile? file = await _controller.takePicture();

                    if (file != null) {
                      // 显示拍照结果或保存到文件
                      print('Photo taken: ${file.path}');
                      // 例如，你可以使用file.path来展示图片或保存到指定位置
                    }
                  },
                  child: Text('Take Picture'),
                ),
              ],
            )
          : Center(
              child: CircularProgressIndicator(),
            ),
    );
  }
}

4. 运行应用

确保你已经正确配置了所有权限和依赖，然后运行你的Flutter应用：

flutter run

总结

以上代码展示了如何使用camera_with_files插件在Flutter中实现相机拍照功能。你可以根据需要对拍照后的图片进行进一步处理，例如保存到指定文件夹或显示在UI中。记得在实际项目中处理错误和异常，并根据需要调整UI布局和权限请求逻辑。

回到顶部