「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
