CODEWITHSUNDEEP
flutterdartflutter-layout
karthick ravindranath
karthick ravindranath

Reputation: 97

How to Remove extra spacing at the bottom of ReorderableListView - flutter?

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);


    });

  }
}

Upvotes: 2

Views: 2610

Answers (2)

magicleon94
magicleon94

Reputation: 5182

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

Upvotes: -1

Sahdeep Singh
Sahdeep Singh

Reputation: 1442

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).

Upvotes: 2

Related Questions