Reorderable ListView in Flutter

Every Android and iOS application contains a list of items. Android and iOS applications list are not draggable. We can not drag the specific list time 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 mobile application.


Reorderable list

 A list of things that may be interactively reordered by dragging.

Properties of Reorderable List:

    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}

   )



This constructor is suited for lists with a small number of children since building the List necessitates performing work for every kid that may be displayed in the listview rather than just those who are visible.ReorderableListView.builder allows you to create a reorderable list with items added as needed while scrolling.

Here is the step by step Implementation process:

Step 1: Create a new project in the Flutter project or you can use an already created Flutter project. 


Step 2: Below code write in Homescreen.dart in lib folder.
 import 'dart:ui';
import 'package:flutter/material.dart';

void main()
{
runApp(HomeScreen());
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('ReorderableListView Sample')),
body: const ReorderableExample(),
),
);
}
}

class ReorderableExample extends StatefulWidget {
const ReorderableExample({super.key});

@override
State<ReorderableExample> createState() => _ReorderableExampleState();
}

class _ReorderableExampleState extends State<ReorderableExample> {
final List<int> _items = List<int>.generate(50, (int index) => index);

@override
Widget build(BuildContext context) {
final ColorScheme colorScheme = Theme.of(context).colorScheme;
final Color oddItemColor = colorScheme.secondary.withOpacity(0.05);
final Color evenItemColor = colorScheme.secondary.withOpacity(0.15);
final Color draggableItemColor = colorScheme.secondary;

Widget proxyDecorator(
Widget child, int index, Animation<double> animation) {
return AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget? child) {
final double animValue = Curves.easeInOut.transform(animation.value);
final double elevation = lerpDouble(0, 6, animValue)!;
return Material(
elevation: elevation,
color: draggableItemColor,
shadowColor: draggableItemColor,
child: child,
);
},
child: child,
);
}

return ReorderableListView(
padding: const EdgeInsets.symmetric(horizontal: 40),
children: <Widget>[
for (int index = 0; index < _items.length; index += 1)
ListTile(
key: Key('$index'),
tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
title: Text('Item ${_items[index]}'),
trailing: ReorderableDragStartListener(
key: ValueKey<int>(_items[index]),
index: index,
child: const Icon(Icons.drag_handle),
),
),
],
onReorder: (int oldIndex, int newIndex) {
setState(() {
if (oldIndex < newIndex) {
newIndex -= 1;
}
final int item = _items.removeAt(oldIndex);
_items.insert(newIndex, item);
});
},
);
}
}

 

Step 3: Output of above example


Happy coding!


365Bloggy May 28, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive