Flutter网格图片展示插件grid_gallery的使用

grid_gallery

一个Flutter包，提供可自定义的小部件，允许用户在设备存储中选择并列出图片，而无需使用原生的Android和iOS照片选择器。

Getting started

Request for permission

Android

无需配置。

iOS

在Info.plist文件中添加以下键值对，位于<project root>/ios/Runner/Info.plist：

<key>NSPhotoLibraryUsageDescription</key>
<string>为了访问您的相册</string>
<key>NSCameraUsageDescription</key>
<string>为了访问您的相机</string>

Usage

以下是grid_gallery的基本使用示例：

完整示例代码

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

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

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

  // 这个小部件是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Grid Gallery Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  late final GalleryController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = GalleryController()..addListener(() => _listenController());
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  void _listenController() => setState(() {});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid Gallery'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.all(16.0),
            color: Colors.white,
            child: Row(
              children: [
                Expanded(
                  child: MaterialButton(
                    onPressed: () => Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => PhotoSelectPage(controller: _controller),
                      ),
                    ),
                    height: 72.0,
                    color: Theme.of(context).primaryColor,
                    textColor: Colors.white,
                    child: Text(
                      '显示页面',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                SizedBox(width: 8.0),
                Expanded(
                  child: MaterialButton(
                    onPressed: () => showModalBottomSheet(
                      context: context,
                      builder: (_) => PhotoSelectPage(controller: _controller),
                    ),
                    height: 72.0,
                    color: Theme.of(context).primaryColor,
                    textColor: Colors.white,
                    child: Text(
                      '显示底部对话框',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                SizedBox(width: 8.0),
                Expanded(
                  child: MaterialButton(
                    onPressed: () => showDialog(
                      context: context,
                      builder: (_) => PhotoSelectPage(controller: _controller),
                    ),
                    height: 72.0,
                    color: Theme.of(context).primaryColor,
                    textColor: Colors.white,
                    child: Text(
                      '显示对话框',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: _controller.selectedIndexes.length,
              itemBuilder: (context, index) => InkWell(
                onTap: () {
                  _controller.remove(_controller.items[index]);
                  // 打印选中图片的信息
                  // print('${_controller.items[index].asset}');
                  // print('${_controller.items[index].data}');
                },
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Ink(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: FileImage(
                          _controller
                              .items[_controller.selectedIndexes[index]].data,
                        ),
                        fit: BoxFit.cover,
                        filterQuality: FilterQuality.high,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class PhotoSelectPage extends StatelessWidget {
  const PhotoSelectPage({Key? key, required this.controller}) : super(key: key);

  final GalleryController controller;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('选择照片'),
      ),
      body: GridGallery(
        controller: controller,
        onChanged: () {
          print('主页面: ${controller.selectedIndexes}');
        },
        onAdded: (index) {
          print('已添加: ${index}');
        },
        onRemoved: (index) {
          print('已移除: ${index}');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => controller.deselectAll(),
        child: Icon(Icons.delete_sweep),
      ),
    );
  }
}