[Flutter/dart] ドラッグ&ドロップ可能なgridviewを作成する

概要

アプリ内にgridviewを配置する事は多いと思いますが、それらをドラッグ&ドロップできるようにしたくなりました。

そんな場合はdrag_and_drop_gridviewを使いましょう。

方法

基本

まずはライブラリをインストール

drag_and_drop_gridview: ^1.0.8

dartファイル先頭でインポート

import 'package:drag_and_drop_gridview/devdrag.dart';

gridviewの部分は以下のように作成

Widget _myGrid(){

  return DragAndDropGridView(
    onWillAccept: (oldInd, newInd)=> true,
    onReorder: (oldInd, newInd){
      changeListOrder(
        oldInd: oldInd, newInd: newInd, list: _indexes
      );
    },
    itemCount: ITEM_COUNT,
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      crossAxisSpacing: CARD_SPACE,
      mainAxisSpacing: 24,
    ),
    itemBuilder: (context, index)=> _itemBuilder(index),
  );
}

int ITEM_COUNT=8;
List<int> _indexes=[];
static const double PADDING=32;
static const double CARD_SPACE=24;
bool _sizeCalced=false;
double _cardSize;

@override
Widget build(BuildContext context) {

　　if (!_sizeCalced) {
  　　_cardSize = (MediaQuery.of(context).size.width - 2 * PADDING - 
  　　　　　　　　　　CARD_SPACE) / 2;
　　  _sizeCalced=true;
　　}

  _indexes=List.generate(ITEM_COUNT, (index) => index);

  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Center(
        child: Container(
          padding: const EdgeInsets.all(32),
          child: _myGrid(),
          width: double.infinity,
        ),
      )
    ),
  );
}

以下各プロパティについて

onWillAccept: ドラッグで順序が入れ替わった場合にそれを許容するか。今回は無条件に許可する。

onReorder: 順序が入れ替わった場合の処理。ここでは以下のメソッドを使用して_indexesの要素を入れ替えている。

static void changeListOrder({int oldInd, int newInd, List<int> list}){

  int oldVal=list[oldInd];

  if (oldInd<newInd){

    for (int i=oldInd; i<newInd; i++){
      list[i]=list[i+1];
    }
  }
  else{
    for (int i=oldInd; i>newInd; i--){
      list[i]=list[i-1];
    }
  }
  list[newInd]=oldVal;
}

itemCount: 要素数。これを設定し忘れるとitemBuilderでindex errorになるので注意。

gridDelegate: gridの配置を規定する。

itemBuilder: 個々のviewを作成する。2番目の引数はindex番目の要素の意。ここでは下記のようにした。

Widget _itemBuilder(int index){

  int _ind=_indexes[index];

  return Container(
    height: _cardSize,
    width: _cardSize,
    child: Center(
      child: Text(
        _ind.toString(),
        style: const TextStyle(
          fontSize: 24,
          color: Colors.white,
          decoration: TextDecoration.none
        ),
      ),
    ),
    color: Colors.grey,
  );
}

decoration: TextDecoration.noneがないとドラッグ中に黄色い線が入ってしまいます。

また、Containerの高さと幅は明示的に指定します。これは、ドラッグ中にも同じサイズを保つためです。この変数_cardSizeはbuild()の最初で計算します。

結果は以下の通り。

ドラッグ中の見た目を変更する

このままだと、ドラッグしている時としていない時とで同じ見た目なので、ドラッグ中は見た目を変えるようにしましょう。

isCustomFeedbackをtrueにし、feedback:にドラッグ中のWidgetを指定します。

今回は、ドラッグ中は背景色を変えましょう。

_itemBuilder()にドラッグ中か否かを表す引数を追加します。

Widget _itemBuilder(int index, bool onDrag){

  int _ind=_indexes[index];

  return Container(
    height: _cardSize,
    width: _cardSize,
    child: Center(
      child: Text(
        _ind.toString(),
        style: const TextStyle(
          fontSize: 24,
          color: Colors.white,
          decoration: TextDecoration.none
        ),
      ),
    ),
    color: onDrag? Colors.red: Colors.grey,
  );

Widget _myGrid(){

  return DragAndDropGridView(
    onWillAccept: (oldInd, newInd)=> true,
    onReorder: (oldInd, newInd){
      changeListOrder(
        oldInd: oldInd, newInd: newInd, list:_indexes
      );
    },
    itemCount: 8,
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      crossAxisSpacing: CARD_SPACE,
      mainAxisSpacing: 24,
    ),
    itemBuilder: (context, index)=> _itemBuilder(index, false),
    isCustomFeedback: true,  //ここ
    feedback: (index)=> _itemBuilder(index, true), //ここ
  );
}

結果は以下のようになります。

ドラッグ中に元あった場所の見た目を変える

また、ドラッグ中に、ドラッグしているカードが元あったところの見た目も変えましょう。

このためには、isCustomChildWhenDraggingをtrueにし、childWhenDraggingに元あった場所に表示するWidgetを指定します。

Widget _myGrid(){

  return DragAndDropGridView(
    onWillAccept: (oldInd, newInd)=> true,
    onReorder: (oldInd, newInd){
      changeListOrder(
      　　oldInd: oldInd, newInd: newInd, list: _indexes
      );
    },
    itemCount: 8,
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      crossAxisSpacing: CARD_SPACE,
      mainAxisSpacing: 24,
    ),
    itemBuilder: (context, index)=> _itemBuilder(index, false),
    isCustomFeedback: true,
    feedback: (index)=> _itemBuilder(index, true),
    isCustomChildWhenDragging: true,　　//ここ
    childWhenDragging: _childWhenDragging,　//ここ
  );
}

Widget _childWhenDragging(int index){
  return Container(
    width: _cardSize,
    height: _cardSize,
    color: Colors.transparent,
  );
}

今回は背景と同化するようにしました。

結果は以下のようになります。