Flutter Listview Sort Animation

Question

I want to sort my listview with animation. When the user tapped the button, automatically button's priority is change. Then I want to sort Listview. Currently, I use setState and animation is not possible. The user can't see which widget is changed with another widget.

I've tried these libraries;

• https://pub.dev/packages/smooth_sort#documentation
• Flutter list items change position with animation

Answer 1

Update: 25.06.2022: Please note that this package is discontinued and this solution is no longer valid

---

Original Answer:

I understand you are looking for something like this?

This is made with the implicitly_animated_reorderable_list package .

Works pretty smooth and straight forward imo. The package also comes with a list which is manually reorderable as well.

Here is the code from the gif:

import 'package:flutter/material.dart';
import 'package:implicitly_animated_reorderable_list/implicitly_animated_reorderable_list.dart';
import 'package:implicitly_animated_reorderable_list/transitions.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<ListItem> listItems = _listItems;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('ImplicitlyAnimatedList Example '),
        ),
        body: ImplicitlyAnimatedList<ListItem>(
            items: listItems,
            itemBuilder: (context, animation, item, index) =>
                SizeFadeTransition(
                  sizeFraction: 0.7,
                  animation: animation,
                  key: Key(item.label),
                  child: ListTile(
                    leading: item.icon,
                    title: Text(item.label),
                  ),
                ),
            areItemsTheSame: (a, b) => a.label == b.label),
        floatingActionButton: FloatingActionButton.extended(
            icon: const Icon(Icons.swap_vert),
            onPressed: () => setState(() {
                  listItems.shuffle();
                }),
            label: const Text('sort')));
  }
}

final List<ListItem> _listItems = [
  ListItem(
    label: 'list item 1',
    icon: const Icon(Icons.ac_unit),
  ),
  ListItem(
    label: 'list item 2',
    icon: const Icon(Icons.access_alarm),
  ),
  ListItem(
    label: 'list item 3',
    icon: const Icon(Icons.accessibility),
  ),
  ListItem(
    label: 'list item 4',
    icon: const Icon(Icons.account_box),
  ),
  ListItem(
    label: 'list item 5',
    icon: const Icon(Icons.add_call),
  ),
  ListItem(
    label: 'list item 6',
    icon: const Icon(Icons.add_task),
  ),
  ListItem(
    label: 'list item 7',
    icon: const Icon(Icons.airplanemode_active),
  ),
];

class ListItem {
  final String label;
  final Icon icon;

  ListItem({
    required this.label,
    required this.icon,
  });
}