facebook twitter hatena line email

「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
+
==参考==
 +
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