「Flutter/外部ライブラリ/flutter reorderable list」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→インストール) |
(→サンプル) |
||
行12: | 行12: | ||
<pre> | <pre> | ||
import 'package:flutter_reorderable_list/flutter_reorderable_list.dart'; | 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> | </pre> | ||
2019年12月4日 (水) 19:06時点における版
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; }); }, ); }
公式
https://pub.dev/packages/flutter_reorderable_list#-example-tab-
参考
https://stackoverflow.com/questions/53908025/flutter-sortable-drag-and-drop-listview