3

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;

enter image description here

6
  • 1
    If my answer helped you, please mark it as the accepted answer, thanks :-) stackoverflow.com/a/69132417/8539278 Commented Sep 11, 2021 at 12:24
  • 1
    Is what you're looking a bit like a reorderable listview (api.flutter.dev/flutter/material/ReorderableListView-class.html) except instead of anything being draggable by the user, you could trigger an animation on it with something like animatedReorderController.reorder(startIndex: 2: endIndex 0), and you would see the list item up the list-- not disappearing and reappearing, but doing a translate animation? Commented Sep 11, 2021 at 23:46
  • @BenjaminLee yeah, I want to doing a translate animation Commented Sep 12, 2021 at 22:28
  • I don't know of any current flutter package that does this. One idea (though it would take some effort) would be to create a modified version of ReorderableListView. Another question is: Does your list have an expected maximum size? Trying to make the animation feel right even if it was traversing 100 items would be tricky... Commented Sep 13, 2021 at 15:21
  • I'll show only 10 items, just I need to show item location change animation Commented Sep 14, 2021 at 0:09

1 Answer 1

4
+50

Update: 24 October 2023

The package implicitly_animated_reorderable_list package has been resurrected as animated_list_plus


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,
  });
}
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for your help, I solved my problem w/ u answer
I need the row version of this. Are there any alternatives?
Beware: implicitly animated list doesn't work with Dismissible widgets
You can also use pub.dev/packages/implicitly_animated_reorderable_list_2, since the original package is currently deprecated and the updated one seems to better apply for user-action reorderable items :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.