「Flutter/外部ライブラリ/flutter reorderable list」の版間の差分

2019年12月9日 (月) 15:18時点における最新版

flutter_reorderable_listとは

listの並び替えライブラリ

インストール

pubspec.yaml

dependencies:
  flutter_reorderable_list: ^0.1.3

サンプル

import 'package:flutter_reorderable_list/flutter_reorderable_list.dart';

  List<String> _list = ["Apple", "Ball", "Cat", "Dog", "Elephant"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //title: Text("$widget.title hooge ${articles.length}"),
        title: Text(pageTitle, style: TextStyle(locale: Locale("ja", "JP")),),
        //actions: _buildAppBarActionButton()
      ),
      body: getReorderableListView(),
    );
  }
  Widget getReorderableListView() {
   return
     ReorderableListView(
       children: _list.map((item) => 
         ListTile(
           key: Key("${item}"),
           title: Text("${item}"),
           trailing: Icon(Icons.menu),
         )
       ).toList(),
       onReorder: (int start, int current) {
         // dragging from top to bottom
         if (start < current) {
           int end = current - 1;
           String startItem = _list[start];
           int i = 0;
           int local = start;
           do {
             _list[local] = _list[++local];
             i++;
           } while (i < end - start);
           _list[end] = startItem;
         }
         // dragging from bottom to top
         else if (start > current) {
           String startItem = _list[start];
           for (int i = start; i > current; i--) {
             _list[i] = _list[i - 1];
           }
           _list[current] = startItem;
         }
         setState(() {
           _list = _list;
         });
       },
     );
  }

並び替えにチェックボックスを付ける

ListTileの部分を以下に切り替える

CheckboxListTile(
  key: Key("${item.id}"),
  value: item.checkState ?? false,
  onChanged: (bool newValue) {
    setState(() {
      item.checkState = newValue;
    });
    _refreshCheckbox();
  },
  title: Text("${item.title}"),
  secondary: const Icon(Icons.drag_handle),
)

公式

https://pub.dev/packages/flutter_reorderable_list#-example-tab-

参考

https://stackoverflow.com/questions/53908025/flutter-sortable-drag-and-drop-listview

備考

flutter_galleryにサンプルあり？

flutter_gallery/lib/demo/material/reorderable_list_demo.dart