Flutter相机拍照与图片展示插件gallery_camera_image的使用

Flutter相机拍照与图片展示插件gallery_camera_image的使用

如何安装

Android

  1. 将 UCropActivity 添加到您的 AndroidManifest.xml 文件中。
<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
  1. 在 AndroidManifest.xml 文件中添加所需的权限。
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  1. 将最低的 Android SDK 版本更改为 21（或更高）在您的 android/app/build.gradle 文件中。
minSdkVersion 21
  1. 更改 Kotlin 版本在 android/build.gradle 文件中。
ext.kotlin_version = '1.6.10'

如何使用 GalleryCamerImage Widget

您可以使用以下代码来启动相机并获取拍摄的照片：

await Get.to(() => GalleryCamareImage(
      fromEditProfile: true,
))!
.then((value) {
  if (value != null) selectedCropImage = value;
});

或者，您可以使用以下代码来选择并编辑现有的照片：

imagePickEdit(context)

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 GalleryCameraImage 插件。

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

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: GalleryCamareImage(),
    );
  }
}

更多关于Flutter相机拍照与图片展示插件gallery_camera_image的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter相机拍照与图片展示插件gallery_camera_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用 gallery_camera_image 插件在 Flutter 中实现相机拍照与图片展示的示例代码。首先，你需要确保在 pubspec.yaml 文件中添加了 gallery_camera_image 插件依赖项：

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

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

接下来是主代码部分，这里展示了如何集成并使用 gallery_camera_image 插件来实现相机拍照与图片展示功能。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Camera and Gallery Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CameraGalleryDemo(),
    );
  }
}

class CameraGalleryDemo extends StatefulWidget {
  @override
  _CameraGalleryDemoState createState() => _CameraGalleryDemoState();
}

class _CameraGalleryDemoState extends State<CameraGalleryDemo> {
  late GalleryCameraImageController _controller;
  late File _imageFile;

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

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

  Future<void> _takePicture() async {
    try {
      final XFile? image = await _controller.takePicture();
      if (image != null) {
        setState(() {
          _imageFile = File(image.path);
        });
      }
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera and Gallery Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                await _takePicture();
              },
              child: Text('Take Picture'),
            ),
            SizedBox(height: 20),
            if (_imageFile != null)
              Image.file(_imageFile!)
            else
              CircularProgressIndicator(),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖添加：

    • 在 pubspec.yaml 中添加 gallery_camera_image 插件依赖项。

  2. 初始化：

    • 创建一个 GalleryCameraImageController 实例，并在 initState 方法中初始化它。

  3. 拍照功能：

    • 使用 _controller.takePicture() 方法拍照，并将拍摄的图片路径保存到 _imageFile 变量中。

  4. UI展示：

    • 使用 ElevatedButton 触发拍照功能。
    • 使用 Image.file(_imageFile!) 显示拍摄的图片。如果 _imageFile 为空，则显示一个 CircularProgressIndicator 作为占位符。

注意事项

  • 确保在真实设备上测试相机功能，模拟器可能不支持。
  • 在实际项目中，考虑添加更多的错误处理和权限请求（如相机和存储权限）。

这个示例展示了基本的相机拍照和图片展示功能，你可以根据需要进一步扩展和优化。

回到顶部