Flutter – Reorderable ListView

Last Updated : 10 Nov, 2022

Generally, every android and iOS application contains a List of items, for example, WhatsApp chats are an example of a list, also in Facebook messenger, there is a huge list of user chats. These lists are not draggable i.e., we can not drag the specific list item to upper or lower, But in this article, we are going to implement how to create a reorderable or draggable item of the list in the flutter. A sample video is given below to get an idea about what we are going to do in this article.

Reorderable List

A list whose items the user can interactively reorder by dragging.

Properties of Reorderable List:

Dart

ReorderableListView(
    {Key? key,
    required List<Widget> children,
    required ReorderCallback onReorder,
    void onReorderStart(
    int index
    )?,
    void onReorderEnd(
    int index
    )?,
    double? itemExtent,
    Widget? prototypeItem,
    ReorderItemProxyDecorator? proxyDecorator,
    bool buildDefaultDragHandles = true,
    EdgeInsets? padding,
    Widget? header,
    Widget? footer,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? scrollController,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    double anchor = 0.0,
    double? cacheExtent,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge}
)

Creates a reorderable list from a pre-built list of widgets. This constructor is appropriate for lists with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible. ReorderableListView.builder, which allows you to build a reorderable list where the items are built as needed when scrolling the list.

Example Code

Dart

import 'package:flutter/material.dart';
 
void main()
{
  runApp(ReorderLisst());
}
class ReorderLisst extends StatefulWidget {
  
 
  ReorderLisst({Key? key}) : super(key: key);
  @override
  _ReorderLisstState createState() => _ReorderLisstState();
}
 
class _ReorderLisstState extends State<ReorderLisst> {
  // list of items that are needed
  // to the reorderlistview widget.
  List<String> item = [
    "GeeksforGeeks",
    "Flutter",
    "Developer",
    "Android",
    "Programming",
    "CplusPlus",
    "Python",
    "javascript"
  ];
   
  // this method sort the item.
  void sorting() {
    setState(() {
    item.sort();
    });
  }
   
  // This method set the new index to the element.
  void reorderData(int oldindex, int newindex) {
    setState(() {
      if (newindex > oldindex) {
        newindex -= 1;
      }
      final items = item.removeAt(oldindex);
         item.insert(newindex, items);
    });
  }
   
  @override
  Widget build(BuildContext context) {
    // materialApp with 
    // debugShowCheckedModeBanner false and home
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      home: Scaffold(
      backgroundColor: Colors.green[400],
      // appbar with title
      appBar: AppBar( 
           title: Text(
          "Reorderable ListView",
          
        ),
       ),
      // This widget creates the 
      // reorderable list of item.
      body: ReorderableListView( 
        onReorder: reorderData,
        children: [
          for (final items in item)
            Card(
              color: Colors.white,
              key: ValueKey(items),
              elevation: 2,
              child: ListTitle(
                title: Text(items),
                 
              ),
            ),
        ],
        ),
    )
    );
  }
}