【Flutter】GridViewでドラッグ＆ドロップ

ListViewにはReordableListViewがあるが、GridViewにはそういうものがない。 非公式のライブラリを使うか、自前で実装する必要があるので、今回は自前でやる。

登場人物は以下の通り。

• GridView：二次元的にアイテムを並べる
• Draggable ：ドラッグされるもの
• DragTarget ：ドロップされる場所

Draggable<T> のプロパティ解説

基本プロパティ

見た目のカスタマイズ

イベントコールバック

高度な設定

DragTarget<T> のプロパティ解説

基本プロパティ

イベントコールバック

高度な設定

サンプルコード

import 'package:flutter/material.dart';

class GalleryModel {
  const GalleryModel({required this.id, required this.title});

  final String id;
  final String title;
}

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

  @override
  State<DragAndDrop> createState() => _DragAndDropState();
}

class _DragAndDropState extends State<DragAndDrop> {
  /// グリッド表示するアイテムリスト
  List<GalleryModel> items = [];

  /// ドラッグ開始時のアイテムを保持
  List<GalleryModel> backupItems = [];

  /// ドラッグ中のアイテムのID
  String? draggingId;

  int _indexOf(String id) => items.indexWhere((final e) => e.id == id);

  @override
  void initState() {
    super.initState();

    // サンプルデータを流し込む
    items = List.generate(50, (final i) {
      final id = i + 1;
      return GalleryModel(id: id.toString(), title: 'タイトル($id)');
    });
    backupItems = List.of(items); // バックアップにもコピー
  }

  /// ドラッグ中に並べ替えを実行
  void reorder(String draggedId, String targetId) {
    final from = _indexOf(draggedId);
    final to = _indexOf(targetId);
    if (from == -1 || to == -1) {
      return; // 不正値
    }
    if (from == to) {
      return; // 同じ場所へのドロップ
    }
    setState(() {
      final moved = items.removeAt(from);
      items.insert(to, moved);
    });
  }

  /// ドロップ、キャンセル、ドラッグの完了と終了した際に実行
  void endDrag({bool cancelReorder = false}) {
    setState(() {
      if (cancelReorder) {
        items = List.of(backupItems); // バックアップから復元、ドラッグ前に戻す
      } else {
        backupItems = List.of(items); // バックアップを最新リストで更新
      }
      draggingId = null;
    });
  }

  Widget buildGridItem(final BuildContext context, final int index) {
    final item = items[index];
    final childTile = GalleryTile(item: item);

    return DragTarget(
      onWillAcceptWithDetails: (final details) {
        reorder(details.data.toString(), item.id);
        return true;
      },
      onAcceptWithDetails: (final DragTargetDetails details) {
        endDrag(cancelReorder: false);
      },
      builder: (context, candidateData, rejectedData) {
        final isHovered = candidateData.isNotEmpty;
        final isHidden = isHovered || draggingId == item.id;

        return LongPressDraggable(
          data: item.id,
          delay: const Duration(milliseconds: 70),
          onDragStarted: () {
            setState(() {
              draggingId = item.id;
              backupItems = List.of(items);
            });
          },
          onDraggableCanceled: (_, __) {
            debugPrint('onDraggableCanceled');
          },
          onDragCompleted: () {
            debugPrint('onDragCompleted');
          },
          onDragEnd: (final DraggableDetails details) {
            endDrag(cancelReorder: !details.wasAccepted);
          },
          feedback: Material(
            // overlay 上に出すため Material で包む
            elevation: 8,
            borderRadius: BorderRadius.circular(8),
            child: SizedBox(
              width: 120,
              height: 120 / 0.8,
              child: GalleryTile(item: item),
            ),
          ),
          childWhenDragging: Opacity(
            opacity: isHidden ? 0 : 1,
            child: childTile,
          ),
          child: Opacity(opacity: isHidden ? 0 : 1, child: childTile),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridのD&D'),
        foregroundColor: Colors.white,
        backgroundColor: Colors.blueGrey,
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 125,
            crossAxisSpacing: 5,
            mainAxisSpacing: 10,
            childAspectRatio: 0.8,
          ),
          itemCount: items.length,
          itemBuilder: buildGridItem,
        ),
      ),
    );
  }
}

class GalleryTile extends StatelessWidget {
  const GalleryTile({super.key, required this.item});

  final GalleryModel item;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final w = constraints.maxWidth;
        final h = constraints.maxHeight;
        final imgSrc = 'https://picsum.photos/id/${item.id}/2000/1500';

        return Container(
          width: w.roundToDouble(),
          height: h.roundToDouble(),
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                width: 96,
                height: 96,
                child: Image.network(imgSrc, fit: BoxFit.cover),
              ),
              Text(item.title, maxLines: 1, overflow: TextOverflow.ellipsis),
            ],
          ),
        );
      },
    );
  }
}

補足：GridView VS SliverGrid

GridView は内部で SliverGrid を組み立てている。SliverGrid では addAutomaticKeepAlives、addRepaintBoundaries、addSemanticIndexesを指定できるところが大きな違いで、これら３つのフラグが全てtrueであり且つgridDelegateが同じ場合、同等の構成になることが多い。

以下２つコードは、書き方は違うが内部的にもほぼ同じ構成になる。

GridView.builder(
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 125,
    mainAxisSpacing: 10,
    crossAxisSpacing: 5,
    childAspectRatio: 0.8,
  ),
  itemCount: items.length,
  itemBuilder: (c, i) => buildTile(i),
);

CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 125,
        mainAxisSpacing: 10,
        crossAxisSpacing: 5,
        childAspectRatio: 0.8,
      ),
      delegate: SliverChildBuilderDelegate(
        (c, i) => buildTile(i),
        childCount: items.length,
        addAutomaticKeepAlives: true,
        addRepaintBoundaries: true,
        addSemanticIndexes: true,
      ),
    ),
  ],
);

フラグの説明

サンプルコード

class _DragAndDropState extends State<DragAndDrop> {

  // ... 省略

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            pinned: true,
            title: Text('GridのD&D'),
            foregroundColor: Colors.white,
            backgroundColor: Colors.blueGrey,
          ),
          const SliverToBoxAdapter(child: SizedBox(height: 12)),
          SliverPadding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            sliver: SliverGrid(
              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 125,
                crossAxisSpacing: 5,
                mainAxisSpacing: 10,
                childAspectRatio: 0.8,
              ),
              delegate: SliverChildBuilderDelegate(
                buildItem,
                childCount: items.length,
                addAutomaticKeepAlives: false,
                addRepaintBoundaries: false,
                addSemanticIndexes: false,
              ),
            ),
          ),
          const SliverToBoxAdapter(child: SizedBox(height: 30)),
        ],
      ),
    );
  }
}