Flutter图片选择功能插件image_select的使用

Flutter图片选择功能插件image_select的使用

介绍

欢迎来到Image Select Maestro的世界！这个Flutter插件结合了image_picker、camera和flutter_native_image三个强大的插件，为您提供了无缝且稳定的图片选择体验。通过这个插件，您可以在所有设备上轻松选择和压缩图片，告别繁琐和容易崩溃的体验。

安装

要在您的项目中使用image_select插件，请在pubspec.yaml文件中添加以下依赖：

dependencies:
  image_select: ^0.0.3 

图片压缩

使用image_select插件，您可以轻松地选择并压缩图片。该插件内置了图片压缩功能，无需额外配置即可实现高效压缩。

Android配置

对于Android平台，您无需进行任何额外的配置，插件已经为您处理好了所有细节。

相机功能

插件还提供了一些相机相关的特性，例如前置摄像头的镜像效果，使自拍更加自然。

示例代码

以下是一个完整的示例demo，展示了如何使用image_select插件来选择和显示图片：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_select/image_select.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Select App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Image Selector Example App'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? file;

  // 配置相机界面的设置
  CameraUiSettings cameraUiSettings = CameraUiSettings(
    appbarColor: Colors.teal, // 设置顶部栏颜色
    iconTheme: const IconThemeData(color: Colors.white), // 设置图标颜色
    title: '拍摄图片', // 设置标题
    textStyle: const TextStyle(color: Colors.white), // 设置文本样式
    initialCameraSide: CameraSide.back, // 初始摄像头为后置
  );

  // 选择图片的方法
  pickImage(ImageFrom source) async {
    debugPrint(cameraUiSettings.toJson().toString()); // 打印相机设置
    ImageSelect imageSelector = ImageSelect(
      cameraUiSettings: cameraUiSettings, // 传递相机设置
      compressImage: true, // 启用图片压缩
    );
    await imageSelector.pickImage(context: context, source: source).then((pickedFile) {
      if (pickedFile != null) {
        setState(() {
          file = pickedFile; // 更新状态，显示选中的图片
        });
        Navigator.pop(context); // 关闭对话框
      }
    });
  }

  // 显示选择来源的对话框
  showSourceDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                '选择来源',
                style: TextStyle(fontSize: 18),
              ),
              const SizedBox(height: 10),
              ListTile(
                onTap: () => pickImage(ImageFrom.camera), // 选择相机
                title: const Text('相机'),
              ),
              ListTile(
                title: const Text('相册'), // 选择相册
                onTap: () => pickImage(ImageFrom.gallery),
              ),
            ],
          ),
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 显示选中的图片
            Container(
              height: 400,
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(color: Colors.grey.shade400),
              width: MediaQuery.of(context).size.width * 0.74,
              child: file != null ? Image.file(file!) : const SizedBox.shrink(),
            ),
            const SizedBox(height: 30),
            // 选择图片的按钮
            ElevatedButton(
              onPressed: showSourceDialog,
              style: ElevatedButton.styleFrom(
                elevation: 0,
                backgroundColor: Colors.deepPurple,
                shape: const StadiumBorder(),
              ),
              child: const Text(
                '选择图片',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}