Flutter多图网格选择插件flutter_image_multi_grid_selection的使用

一个Flutter插件，用于多网格图像选择。用户可以通过提供行数和列数来选择多个图像网格，并在网格中展示这些图像。

安装

要使用此插件，在你的pubspec.yaml文件中添加flutter_image_multi_grid_selection作为依赖项。

dependencies:
  flutter:
    sdk: flutter
  flutter_image_multi_grid_selection: ^版本号

确保运行flutter pub get以获取新添加的依赖项。

使用示例

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

示例代码

import 'dart:developer';

import 'package:flutter/material.dart';
// 忽略：依赖于引用的包
import 'package:flutter_image_multi_grid_selection/flutter_image_multi_grid_selection.dart';

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

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

  // 此小部件是您的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImageGridSelectorExample(),
    );
  }
}

class ImageGridSelectorExample extends StatelessWidget {
  ImageGridSelectorExample({super.key});
  // 图像的URL
  String imageURL =
      'https://res.cloudinary.com/vertexinspector/image/upload/v1678793934/inspection-images/mjujbtrvgtjuv3z3hlo0.jpg'; //

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: ImageGridSelector(
        // 使用网络图像
        image: NetworkImage(imageURL),
        // 设置行数为4
        rows: 4,
        // 设置列数为4
        columns: 4,
        // 设置网格颜色
        gridColor: Colors.green,
        // 设置覆盖层颜色
        overlayColor: Colors.orangeAccent.withOpacity(0.5),
        // 当选择单元格时触发的回调函数
        onCellsSelected: (selectedCells) {
          log('Selected cells: ${selectedCells.toString()}');
        },
      ),
    ));
  }
}

说明

1. 导入库：

   import 'package:flutter_image_multi_grid_selection/flutter_image_multi_grid_selection.dart';
   

2. 创建主应用：

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: ImageGridSelectorExample(),
       );
     }
   }
   

3. 定义示例页面：

   class ImageGridSelectorExample extends StatelessWidget {
     ImageGridSelectorExample({super.key});
     String imageURL = 'https://res.cloudinary.com/vertexinspector/image/upload/v1678793934/inspection-images/mjujbtrvgtjuv3z3hlo0.jpg'; //
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
           body: SafeArea(
         child: ImageGridSelector(
           image: NetworkImage(imageURL),
           rows: 4,
           columns: 4,
           gridColor: Colors.green,
           overlayColor: Colors.orangeAccent.withOpacity(0.5),
           onCellsSelected: (selectedCells) {
             log('Selected cells: ${selectedCells.toString()}');
           },
         ),
       ));
     }
   }
   

通过上述代码，你可以看到如何配置和使用flutter_image_multi_grid_selection插件来实现多网格图像选择功能。希望这对你有所帮助！