facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(サンプル)
行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

2019年12月9日 (月) 15:15時点における版

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

備考

flutter_galleryにサンプルあり?

flutter_gallery/lib/demo/material/reorderable_list_demo.dart