先日、Flutterで縦横並べ替えが出来る「ReorderWrap」というツールを自作しました笑

【Pub.dev】

https://pub.dev/packages/reorderwrap

【Github】

https://github.com/shoushimizu1025/reorder_wrap

 

このツールを使うとこのように縦横並べ替え&並べ替えた後に並び順をコールバック関数で受け取る事が出来ます。

 

作った理由

Flutter公式の機能には縦並べ替えの「ReorderableListView」というWidgetはありますが、縦横並べ替え(マス目状並べ替え)機能を持つWidgetがありませんでした。

このようなツールは既に素晴らしいものがありますが、私の使っている環境では2020/2/20時点でFlutterバージョン関係のエラーで利用できなかった為、「仕方ない、作ってみるか!」と安易な気持ちで作成しました。

【素晴らしい並べ替えツール】

https://pub.dev/packages/reorderables

 

ツールの使い方

特徴

このツールは縦並べ替えの「ReorderableListView」Widgetに影響を受けています。

また、ツール名に「Wrap」とある通り、WrapWidgetで並べ替え機能部分をラップしています。

なので、画面を飛び出さずに折り返して、複数行となって表示されます。

Wrapに、行間をまたいで並べ替えを行えるようにしたのが「ReorderWrap」です。

 

移動方法

ReorderableListView」と同じくLongPressで移動を開始します。

 

利用できる条件

WrapWidgetと同じく、対象となるWidgetリストをクラスの引数として渡します。

その際、あまり汎用的な構築を行っていなく、Widgetリスト全ての縦横幅が同じである必要があります。(そのうち直すかも)

縦10横15の場合は、全てのWidgetが縦10横15でなければなりません。

 

使用例

Pub.devの通りですが一応載せておきます。

ReorderWrapは4つの引数を設定します。

・itemHeight

Widget1個分の高さ(int)

 

・itemWidth

Widget1個分の横幅(int)

 

・children

List<Widget>型のリストデータを設定します。

 

・reorderCallback

コールバック関数です。

引数に、並び順Indexリスト(List<int>)、移動前のIndex(int)、移動後のIndex(int)を指定して、これらを受け取れます。

 

最後に

同じく縦横並べ替え機能に悩んでいる方の助けになれば幸いです。

Flutterのツールを作ったのは初めてで、もっといい組み方があるかもしれません。

その場合はご教授お願い致します。