如何删除 ReorderableListView - flutter 底部的多余间距？

Question

I'm trying to create a ReorderableListView in a flutter with dynamic data. Extra spacing coming at the bottom of the list. Any help would be appreciated.

class _MyHomePageState extends State {

  List<String> _listData = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"];


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Colors.lightGreen,
      appBar: AppBar(
        title: Text("Listview Drag and Drop"),
        backgroundColor: Colors.deepOrange,
      ),
      body: Center(

        child: ReorderableListView(
          header:
          Container(
             margin: EdgeInsets.only(top: 10),
            decoration: BoxDecoration(
                color: Colors.deepPurple,
                border: Border.all(color: Colors.white,width: 2),
                borderRadius: BorderRadius.all(Radius.circular(4))
            ),

            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("ReorderableListView",textAlign: TextAlign.start,
                style: TextStyle(color: Colors.white,fontSize: 18),),
            ),
          ),
            children: [
              for(final item in _listData) getChildItems(item,context)
            ],
            onReorder: (oldIndex,newIndex){

                _updateMyItems(oldIndex,newIndex);


            }
        ),
      ),
    );
  }

  getChildItems(_item,_context) {
    return Padding(
      key: ValueKey(_item),

      padding: const EdgeInsets.all(8.0),
      child: InkWell(
        onTap: (){},
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.white,width: 2),
            borderRadius: BorderRadius.all(Radius.circular(4))
          ),

          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(_item+" Items",textAlign: TextAlign.start,
            style: TextStyle(color: Colors.black54,fontSize: 18),),
          ),
        ),
      ),
    );
   }

  _updateMyItems(int old,int newIndex)
  {
    setState(() {

      if(newIndex>old)
        {
          newIndex-=1;
        }
        var item=_listData.removeAt(old);
      _listData.insert(newIndex, item);


    });

  }
}

Answer 1

The Extra space of 100px is added intentionally to allow List item to be added to that space while dragging.

You can see the source Here at github

static const double _defaultDropAreaExtent = 100.0;

The only solution is to use any other custom made ReorderListView Libraries and plugins. Or You can copy this file (perks of open source) and make changes according to your requirement.

For instance, you can change the same value to drop the extra spacing but it would make a user to wait for the animated item to complete there animation & reordering and then he/she will be able to drop that item in that place (at end).

Answer 2

I believe you can use MediaQuery.removePadding :

MediaQuery.removePadding(
            context: context,
            removeBottom: true,
            child: Text("Your child here")
           )

Which allows you to remove default padding applied in some cases