A demo of shuffling UI using my animated_to package

main.dart

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

void main() => runApp(const MainApp());

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: _PracticePage());
  }
}

class _PracticePage extends StatefulWidget {
  const _PracticePage();

  @override
  State<_PracticePage> createState() => _PracticePageState();
}

class _PracticePageState extends State<_PracticePage> {
  static const _size = 60.0;
  static const _colors = [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow,
    Colors.purple,
    Colors.orange,
    Colors.pink,
    Colors.teal,
    Colors.lime,
    Colors.indigo,
    Colors.cyan,
    Colors.amber,
    Colors.deepOrange,
  ];

  final _items = List.generate(
    20,
    (index) => Item(_colors[index % _colors.length], '$index'),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Wrap(
                spacing: 8,
                runSpacing: 8,
                children: List.generate(
                  _items.length,
                  (index) {
                    final child = Container(
                      width: _size,
                      height: _size,
                      decoration: BoxDecoration(
                        color: _items[index].color,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Text(
                          _items[index].text,
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                          ),
                        ),
                      ),
                    );
                    return AnimatedTo(
                      duration: const Duration(milliseconds: 200),
                      globalKey: GlobalObjectKey(_items[index]),
                      curve: Curves.easeInOut,
                      child: Draggable<Item>(
                        data: _items[index],
                        feedback: Material(
                          color: Colors.transparent,
                          child: child,
                        ),
                        childWhenDragging: const SizedBox(
                          width: _size,
                          height: _size,
                        ),
                        child: DragTarget<Item>(
                          builder: (context, _, __) => child,
                          onWillAcceptWithDetails: (details) {
                            if (details.data == _items[index]) {
                              return false;
                            }
                            setState(() {
                              final fromIndex = _items.indexOf(details.data);
                              final toIndex = index;

                              final temp = _items[fromIndex];
                              _items[fromIndex] = _items[toIndex];
                              _items[toIndex] = temp;
                            });
                            return true;
                          },
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: () {
                setState(() => _items.shuffle());
              },
              child: const Text('Shuffle'),
            ),
          ],
        ),
      ),
    );
  }
}

class Item {
  final Color color;
  final String text;

  Item(this.color, this.text);
}