[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,
  );
}

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


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





最新記事

すべて表示

現象 flutter_local_notificationを使って通知を作成。通知タップ時の動作も登録。 通知が来た時にアプリが立ち上がっている(foregroundでもbackgroundでも)と、期待通りの動作となる。 しかし、通知が来た時にアプリが終了していると、通知をタップしても登録した動作とならない。 原因と解決策 アプリが終了すると登録した動作は消えてしまうらしい(参考)。 Note:

概要 Firebase Messagingでメッセージを送信し、通知がタップされたら何らかの動作を実行する(例:特定のページに移動する)という場合は多いかと思います。 通知タップ時にアプリがforeground状態(つまりアプリを開いている)ならば簡単なのですが、アプリがbackground状態にある場合は少し工夫が必要です。 方法 FirebaseMessaging.onBackgroundMe

現象 FirebaseMessaging.onBackgroundMessage()でタイトルのエラーが発生。 原因と解決策 上記メソッドの引数に渡すデリゲートはトップレベル関数でなければならない。自分の場合はインスタンスメソッドを渡していたのでエラーとなった。 渡すメソッドをトップレベル関数にするとエラーは解消した。 @main.dart void main() async{ //略 F

靴を大切にしよう!靴管理アプリ SHOES_KEEP

納品:iPhone6.5①.png

靴の履いた回数、お手入れ回数を管理するアプリです。

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

テーマ日記:テーマを決めてジャンルごとに記録

訂正①2040×1152.jpg

ジャンルごとにテーマ、サブテーマをつけて投稿、記録できる日記アプリです。

google-play-badge.png