facebook twitter hatena line google mixi email

「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