How to create a list which sorts its self like games with the animation

Question

I am creating a game in flutter in which I want to create my leader board page in which I want to achieve the list like Reorderable widget but in that we drag the tile manually but I need to get it automate ,it should elevate and lower another tiles same animation like Reorderable list but it should be automated

I hope I will find some solution with large community

Answer 1

You can take a look at the AnimatedList in Flutter: https://api.flutter.dev/flutter/widgets/AnimatedList-class.html

When a new value is inserted (or removed), it is automatically animated (and you can of course customize this animation to suit your needs).

I'm not sure how you would handle moving an item from one place to the next in the list, though.

Update

I found this other SO thread which mentions the great_list_view package, in which you can just update your underlying list (with the new score, or sort it again) and it will automatically animate it for you. That sounds like a good option, and the package has recently been updated and has a decent amount of likes on pub. https://pub.dev/packages/great_list_view

Answer 2

this is the solution I got But I am not using List View I am manually creating the List Using Animated Positioned Widget

import 'dart:developer';
import 'package:flutter/material.dart';

class AnimatedPositionedList extends StatefulWidget {
const AnimatedPositionedList({Key? key}) : super(key: key);

@override
// ignore: library_private_types_in_public_api
_AnimatedPositionedListState createState() => _AnimatedPositionedListState();
}

class _AnimatedPositionedListState extends State<AnimatedPositionedList> {

List<Aa> tempList = [];

List<double> defaultPoisitionList = [100, 170, 240, 310];

List<int> indexList = [0, 1, 2, 3];

// TODO LIST OUT INITIAL VALUES
List<Aa> pointsList = [
Aa(id: 0, points: 100),
Aa(id: 1, points: 200),
Aa(id: 2, points: 300),
Aa(id: 3, points: 400),
];

// TODO THE ININ STATE WILL CHANGE AS PER THE API LOADES EVERY TIME USER OPENS 
THE PAGE 
@override
void initState() {
getNewList();
super.initState();
}

//TODO LIST WE WILL GET FROM API
getNewList() {
tempList = [
  Aa(id: 0, points: 100),
  Aa(id: 1, points: 200),
  Aa(id: 2, points: 300),
  Aa(id: 3, points: 400),
];

indexList.clear();
for (int i = 0; i < tempList.length; i++) {
  for (int j = 0; j < pointsList.length; j++) {
    if (tempList[i].id == pointsList[j].id) {
      indexList.add(j);
      break;
    }
  }
}
log(indexList.toString());
setState(() {});
}

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: const Text("ListViewStack")),
  body: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 8.0),
    child: SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height * 0.8,
      child: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 100 * tempList.length.toDouble(),
              child: Stack(
                children: [
                  for (int i = 0; i < tempList.length; i++)
                    AnimatedPositioned(
                        curve: Curves.decelerate,
                        top: defaultPoisitionList[indexList[i]],
                        width: 345,
                        height: 60,
                        duration: const Duration(seconds: 1),
                        child: Card(
                          elevation: 4,
                          color: Colors.blue.shade200,
                          child: const ListTile(
                            leading: Icon(
                              Icons.person_3_outlined,
                              size: 30,
                              color: Colors.black,
                            ),
                            title: Text("Player Names"),
                            trailing: Icon(
                              Icons.android_sharp,
                              size: 30,
                              color: Colors.green,
                            ),
                          ),
                        )),
                ],
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  getNewList();
                },
                child: const Text('click'))
          ],
        ),
      ),
    ),
  ),
);
}
}

class Aa {
int id;
int points;
Aa({required this.id, required this.points});
}