flutterflutter-dependenciesflutter-reorderable-listview

Flutter ReorderableListView is not working perfectly in a scrollable parent


In Flutter when i am wrapping my ReorderableListView within ListView or Column with SingleChildScrollView, it is getting rendered but in the case when the height of the total number of items are exceeding the screenheight, when I am dragging one item to the edge of the screen the reorderable listview is not autoscrolling.

But it works fine when there is no scrollable parent it autoscrolls when i am dragging my item to the edge of the screen

This is a minimalistic code that explains my issue

class _MyHomePageState extends State<MyHomePage> {
  final _items = List.generate(25, (index) => index.toString());

  @override
  Widget build(BuildContext context) {
    // This trailing comma makes auto-formatting nicer for build methods.
    return Scaffold(
      backgroundColor: Colors.grey,
      body: ListView(
        children: [
          Container(
            height: 48 * 25,
            color: Colors.yellow,
            margin: EdgeInsets.only(top: 88),
            child: ReorderableListView.builder(
                physics: ClampingScrollPhysics(),
                shrinkWrap: true,
                itemCount: _items.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    key: ValueKey(_items[index]),
                    title: Text(_items[index]),
                  );
                },
                onReorder: (int oldindex, int newindex) {
                  setState(() {
                    if (newindex > oldindex) {
                      newindex -= 1;
                    }
                    final item = _items.removeAt(oldindex);
                    _items.insert(newindex, item);
                  });
                }),
          ),
        ],
      ),
    );
  }
}

I have tried using nestedscrollview, primaryscrollcontroller but I didnt get any good results


Solution

  • Look at the following structure:

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Expanded(
                    child: ListView(
                      shrinkWrap: true,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                                height: MediaQuery.of(context).size.height, // Your height
                                child: ReorderableListView.builder(
                                         physics: ClampingScrollPhysics(),
                                         shrinkWrap: true,
                                         ......
                                 )
                                 ),
                            Text('Does it work?')
                          ],
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
        );
      }
    

    Hope it helps you.