先日、Flutterで縦横並べ替えが出来る「ReorderWrap」というツールを自作しました笑
【Pub.dev】
https://pub.dev/packages/reorderwrap
【Github】
https://github.com/shoushimizu1025/reorder_wrap
このツールを使うとこのように縦横並べ替え＆並べ替えた後に並び順をコールバック関数で受け取る事が出来ます。
https://twitter.com/i/status/1230459447727673346
https://twitter.com/i/status/1231068131923120134
作った理由
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の通りですが一応載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
class _MyHomePageState extends State<MyHomePage> { List<Widget> _icons = <Widget>[ Container( child: GestureDetector( child: Container(height: 90, width: 90, color: Colors.red), onTap: () { debugPrint("Tap!"); }, ), ), Container(height: 90, width: 90, color: Colors.blue), Container(height: 90, width: 90, color: Colors.purple), Container(height: 90, width: 90, color: Colors.blueGrey), Container(height: 90, width: 90, color: Colors.brown), Container(height: 90, width: 90, color: Colors.orange), Container(height: 90, width: 90, color: Colors.lime), Container(height: 90, width: 90, color: Colors.lightGreen), Container(height: 90, width: 90, color: Colors.pink), Container(height: 90, width: 90, color: Colors.lightGreenAccent), Container(height: 90, width: 90, color: Colors.yellow), ]; List<int> _indexList; @override void initState() { super.initState(); _indexList = List.generate(_icons.length, (i)=>i); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( children: <Widget>[ ReorderWrap( itemHeight: 90, itemWidth: 90, children: _icons, reorderCallback: (newIndexList, oldIndex, newIndex){ setState(() { _indexList = newIndexList; }); }, ), Text(_indexList.toString(), style: TextStyle(fontSize: 20) ) ], ), ); } } |
ReorderWrapは4つの引数を設定します。
・itemHeight
Widget１個分の高さ(int)
・itemWidth
Widget１個分の横幅(int)
・children
List<Widget>型のリストデータを設定します。
・reorderCallback
コールバック関数です。
引数に、並び順Indexリスト(List<int>)、移動前のIndex(int)、移動後のIndex(int)を指定して、これらを受け取れます。
最後に
同じく縦横並べ替え機能に悩んでいる方の助けになれば幸いです。
Flutterのツールを作ったのは初めてで、もっといい組み方があるかもしれません。
その場合はご教授お願い致します。
