Flutter - Reorderable ListView Last Updated : 10 Nov, 2022 Comments Improve Suggest changes Like Article Like Report 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), ), ), ], ), ) ); } } Output: Comment More infoAdvertise with us Next Article Flutter - ListTile Widget M ms471841 Follow Improve Article Tags : Flutter Similar Reads Flutter - ListTile Widget The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.Constructor of the ListTile classListTile ListTile({ Key? key, Widget? leading, Widget? title, Widget? subtitle, Widget? trailing 5 min read Flutter - ListTile Widget The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.Constructor of the ListTile classListTile ListTile({ Key? key, Widget? leading, Widget? title, Widget? subtitle, Widget? trailing 5 min read Flutter - Scroll Snap List The scroll_snap_list package provides a wrapper that wraps around the ListView.builder widget to enable snapping event on List items. It can be modified to horizontal or vertical snapping based on the requirements. It is also important to note that it doesn't make use of less or no animation. In thi 4 min read Flutter - RadioListTile Widget RadioListTile is a widget that combines a radio button with a list tile. It is often used in scenarios where you need to present a list of mutually exclusive options, and the user can select one option from the list. Each RadioListTile represents a single option in the list and consists of a title, 5 min read Flutter - RadioListTile Widget RadioListTile is a widget that combines a radio button with a list tile. It is often used in scenarios where you need to present a list of mutually exclusive options, and the user can select one option from the list. Each RadioListTile represents a single option in the list and consists of a title, 5 min read ListView Class in Flutter In Flutter, ListView is a scrollable list of widgets arranged linearly. It displays its children sequentially in the scrolling direction, either vertically or horizontally. There are different types of ListViews :ListViewListView.builderListView.separatedListView.customConstructor of ListView Class: 6 min read Like