「Flutter/外部ライブラリ/flutter reorderable list」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==flutter_reorderable_listとは== listの並び替えライブラリ ==インストール== pubspec.yaml <pre> dependencies: flutter_reorderable_list: ^0.1.3 </pre>...」) |
(→並び替えにチェックボックスを付ける) |
||
(同じ利用者による、間の6版が非表示) | |||
行7: | 行7: | ||
dependencies: | dependencies: | ||
flutter_reorderable_list: ^0.1.3 | flutter_reorderable_list: ^0.1.3 | ||
+ | </pre> | ||
+ | |||
+ | ==サンプル== | ||
+ | <pre> | ||
+ | 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; | ||
+ | }); | ||
+ | }, | ||
+ | ); | ||
+ | } | ||
+ | </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> | ||
行12: | 行84: | ||
https://pub.dev/packages/flutter_reorderable_list#-example-tab- | 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 |
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