ListView in flutter with shuffle animation

Mosh Mobile Software Engineer 0
Viewed 32

So in my flutter screen I have these tiles that is each tile has a letter in it. My plan there that these tiles must be expected to be shuffled when the button is click. Currently, I just have little knowledge in regarding with Flutter animation. I need your help guys.

Tiles

Example of shuffle animation PS: this picture is not mine. I just want to upload this so then you have idea what does shuffle animation do in my tiles.

Shuffle animation

PS: Currently I have this code:

GridView.count(
      crossAxisCount: 6,
      crossAxisSpacing: 4.0,
      mainAxisSpacing: 8.0,
      padding: const EdgeInsets.all(8.0),
      children: List.generate(
        12,
        (index) {
          return Container(
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Center(
              child: Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline5,
              ),
            ),
          );
        },
      ),
    );
flutter-animation flutter-layout flutter
1 Answers

You can try this (DartPad) :

import 'package:flutter/material.dart';

void main() async => runApp(const MyApp());

class MyApp extends StatefulWidget {

  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final String word = "TRIPLE";
  final double size = 170;
  final double space = 10;

  late final List<Color> colors = Colors.primaries
  .take(word.length)
  .map((MaterialColor m) => m.shade800)
  .toList();
  late final int containerNumber = word.length;
  late final List<Rect> positions = List.generate(
    containerNumber, 
    (index) => getRectangle(index, containerNumber, size)
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const SizedBox(height: 50,),
                ElevatedButton(
                  onPressed: shuffle, 
                  child: const Text("Shuffle")
                ),
                const SizedBox(height: 50,),
                SizedBox(
                  height: containerNumber ~/3 * (size+space) - space,
                  width: 3 * (size+space) - space,
                  child: Stack(
                    fit: StackFit.loose,
                    alignment: Alignment.center,
                    children: List.generate(containerNumber, (index) {
                      return AnimatedPositioned.fromRect(
                        rect: positions[index],
                        duration: const Duration(milliseconds: 500),
                        child: Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: colors[index],
                          ),
                          width: size,
                          height: size,
                          child: Text(
                            word[index],
                            style: const TextStyle(
                              fontSize: 60,
                              fontWeight: FontWeight.w900,
                              color: Colors.white
                            ),
                          ),
                        ),
                      );
                    }),
                  )
                ),
              ] 
            ),
          )
        )
      ),
    );
  }

  Rect getRectangle(int index, int length, double size) {
    return 
      Offset(index % 3 * (size + space), index ~/3 * (size + space)) 
      & Size.square(size);
  }
  
  void shuffle() {
    setState(() {
      positions.shuffle();
    });
  }
}
TripleNine0
Related