Hi Guy’s Welcome to Proto Coders Point. In this Flutter tutorial let’s learn how to implement Reorderable listview in flutter app.

What is Reorderable Listview in flutter

Basically a reorderable listview looks similar to listview, the only difference over here is that the user can interact with listview by long press on list item drag & drop to reorder the listview item as per user needs.

Example: Can be used this in developing a simple ToDo application in flutter where a user can reorder his todo list and keep priority task on top.

Video Tutorial

Flutter ReorderableListView Widget & it’s Syntax

In flutter we have a widget i.e. ReorderableListview, It has 2 main properties to be passed (children & onReorder).
and alternatively we have ReorderableListView.builder, It has 3 mandatory properties (itemBuilder, ItemCount, OnReorder). Example below.

Syntax of ReorderableListview

ReorderableListView(
        children: [
              // listview items
        ],
        onReorder: (int oldIndex, int newIndex){
              // list items reordering logic
        },
      )

Syntax of ReorderableListView.builder(….)

ReorderableListView.builder(
          itemBuilder: itemBuilder,    // widget to show in listview Eg: ListTile
          itemCount: itemCount, // number of item to generate in listview
        onReorder: (int oldIndex, int newIndex){
          // list items reordering logic
        },
  )

Reorderable ListView in Flutter – Complete Source Code

Initialize Dummy List by using list generator

 final List<int> _itemList = List<int>.generate(60, (index) => index);

Example 1 – With Video Tutorial

ReorderableListView(
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            if(newIndex > oldIndex){
              newIndex -=1;
            }
            final int temp = _itemList[oldIndex];
            _itemList.removeAt(oldIndex);
            _itemList.insert(newIndex, temp);
          });
        },
        children: [
          for(int index = 0;index<_itemList.length;index++)
            ListTile(
              key:Key('$index'),
              title: Text('Item ${_itemList[index]}'),
            )
        ],
   ),

Example 2 – With Video Tutorial

ReorderableListView.builder(
          itemBuilder: (BuildContext context,int index){
            return Card(
              key: Key('${index}'),
              child: ListTile(

                title: Text('Item ${_itemList[index]}'),
              ),
            );
          },
          itemCount: _itemList.length,
          onReorder: (int oldIndex,int newIndex){
              setState(() {
                if(newIndex > oldIndex){
                  newIndex -=1;
                }
                final int tmp = _itemList[oldIndex];
                _itemList.removeAt(oldIndex);
                _itemList.insert(newIndex, tmp);
              });
      })

Example 3 – Make API Http call request & create a Reorderable Listview – Complete Code

Demo

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  var jsonList;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getData();
  }

  void getData() async{

    http.Response response = await http.get(Uri.parse("https://protocoderspoint.com/jsondata/superheros.json"));
    if(response.statusCode == 200){
       setState(() {
           var newData = json.decode(response.body);
           jsonList = newData['superheros'] as List;
       });
    }else{
      print(response.statusCode);
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Reorderable Listview"),
      ),
      body: ReorderableListView.builder(
          itemBuilder: (BuildContext context,int index){
            return Card(
              key: Key('${index}'),
              child: ListTile(
                leading: ClipRRect(
                  borderRadius: BorderRadius.circular(80),
                    child: Image.network(
                        jsonList[index]['url'],
                      fit: BoxFit.fill,
                      width: 50,
                      height: 100,
                    )
                ),
                title: Text(jsonList[index]['name']),
                subtitle: Text(jsonList[index]['power'],maxLines: 4,),
              ),
            );
          },
          itemCount: jsonList == null ? 0 : jsonList.length,
          onReorder: (int oldIndex,int newIndex){
            setState(() {
              if(newIndex > oldIndex){
                newIndex -=1;
              }
              final tmp = jsonList[oldIndex];
              jsonList.removeAt(oldIndex);
              jsonList.insert(newIndex, tmp);
            });
          })
    );
  }
}