facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(サンプル)
(並び替えにチェックボックスを付ける)
 
(同じ利用者による、間の3版が非表示)
行28: 行28:
 
   return
 
   return
 
     ReorderableListView(
 
     ReorderableListView(
       children: _list.map((item) => ListTile(key: Key("${item}"), title: Text("${item}"), trailing: Icon(Icons.menu),)).toList(),
+
       children: _list.map((item) =>  
 +
        ListTile(
 +
          key: Key("${item}"),
 +
          title: Text("${item}"),
 +
          trailing: Icon(Icons.menu),
 +
        )
 +
      ).toList(),
 
       onReorder: (int start, int current) {
 
       onReorder: (int start, int current) {
 
         // dragging from top to bottom
 
         // dragging from top to bottom
行56: 行62:
 
     );
 
     );
 
   }
 
   }
 +
</pre>
 +
 +
==並び替えにチェックボックスを付ける==
 +
ListTileの部分を以下に切り替える
 +
<pre>
 +
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),
 +
)
 
</pre>
 
</pre>
  
行63: 行86:
 
==参考==
 
==参考==
 
https://stackoverflow.com/questions/53908025/flutter-sortable-drag-and-drop-listview
 
https://stackoverflow.com/questions/53908025/flutter-sortable-drag-and-drop-listview
 +
==備考==
 +
flutter_galleryにサンプルあり?
 +
 +
flutter_gallery/lib/demo/material/reorderable_list_demo.dart

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