How to add footer to ReorderableListView in flutter

Question

Trying to make a ui that contains Header and Footer with rearrangeable content items. There is a property called header from which we can add header item. But what to do if I want to add footer item as well.

import 'package:flutter/material.dart';

class MyStickyHeader extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyStickyHeaderState();
  }
}

class _MyStickyHeaderState extends State<MyStickyHeader> {
  List<Widget> _list = [
    Text("Apple"),
    Text("Ball"),
    Text("Cat"),
    Text("Dog"),
    Text("Elephant")
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 30, left: 10),
      color: Colors.white,
      child: showData(),
    );
  }

  Widget showData() {
    return Container(
      child: ReorderableListView(
        header: Container(
          height: 100,
          color: Colors.red,
        ),
        children: _list
            .map((item) => Container(
                  padding: EdgeInsets.all(10),
                  key: Key("${(item as Text).data}"),
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.ac_unit),
                      Expanded(
                        child: item,
                      )
                    ],
                  ),
                ))
            .toList(),
        onReorder: (int start, int current) {
          // dragging from top to bottom
          if (start < current) {
            int end = current - 1;
            Widget 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
          if (start > current) {
            Widget startItem = _list[start];
            for (int i = start; i > current; i--) {
              _list[i] = _list[i - 1];
            }
            _list[current] = startItem;
          }
          setState(() {});
        },
      ),
    );
  }
}

Answer 1

Last element of your list can be a footer. It has to be a widget with onLongPress property. For example:

ReorderableListView(
      onReorder: (int oldIndex, int newIndex) {},
      children: List.generate(someList.items.length + 1, (index) {
        if (index < someList.items.length)
          return ListTile(
            key: Key(someList.items[index].description),
          );
        else
          return RaisedButton(key: Key('footer'), onPressed: () {}, onLongPress: (){}, child: Text('Button'));
      })),

Answer 2

If you wrap your ReorderableListView with a Column and an Expanded widget, you can add a Container at the bottom to act as a footer:

Column(
  children: <Widget>[
    Expanded(
      child: ReorderableListView(
        header: Container(
          height: 100,
          color: Colors.red,
        ),
        children: _list
          .map((item) => Container(
          padding: EdgeInsets.all(10),
          key: Key("${(item as Text).data}"),
          child: Row(
            children: <Widget>[
              Icon(Icons.ac_unit),
              Expanded(
                child: item,
              )
            ],
          ),
        )).toList(),
        onReorder: (int start, int current) {
          // dragging from top to bottom
          if (start < current) {
            int end = current - 1;
            Widget 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
          if (start > current) {
            Widget startItem = _list[start];
            for (int i = start; i > current; i--) {
              _list[i] = _list[i - 1];
            }
            _list[current] = startItem;
          }
          setState(() {});
        },
      ),
    ),
    Container(
      height: 40,
      alignment: Alignment.center,
      child: Text('Footer'),
      color: Colors.orange,
    ),
  ],
),