flutter - GridView のウィジェットが 1 つとして機能するのはなぜですか (アニメーションに関して)

Question

ハイ、

私はダーツとフラッターが初めてなので、なぜ私のコードが乱雑であると感じるのですか（クラスとウィジェットをいつ使用するのか本当にわかりません）。

クリックすると回転するアセットの画像を含むクリック可能なカードを生成しようとしています-問題は、それらが1つとして機能し、1つがクリックされるとすべて回転することです。そして、2回目にクリックしても何も起こりません。

ここでは、それが何をするかを示しています

import 'dart:typed_data';
import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'assetsLists.dart';
import 'dart:math';

// AudioPlayer player = AudioPlayer();

void main() => runApp(const MaterialApp(
      home: Home(),
    ));

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  AudioPlayer player = AudioPlayer();
  bool isFront = true;
  double angle = 0;

  void _flip() {
    setState(() {
      angle = (angle + pi) % (2 * pi);
    });
    if(isFront) {
      isFront = false;
    }
    else {
      isFront = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("tap card to play a sound"),
        centerTitle: true,
        elevation: 5.0,
        backgroundColor: Colors.green,
      ),
      body: Padding(
          padding: const EdgeInsets.fromLTRB(10, 12, 10, 12),
          child: cardGridBuilder()),
    );
  }

  Widget cardGridBuilder() => GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        padding: const EdgeInsets.fromLTRB(5, 5, 5, 5),
        itemCount: cardAssets.length,
        itemBuilder: (context, index) {
          return cardBuilder(index);
          
          },
  );

  Widget cardBuilder(int number) {
    return Container(
      child: GestureDetector(
        onTap: _flip,
        child: Center(
          child: TweenAnimationBuilder(
                  tween: Tween<double>(begin: 0, end: angle),
                  duration: Duration(milliseconds: 500),
                  builder: (BuildContext context, double val, __) {
                    String pictureAsset = cardAssets[number][0];
                    String soundAsset = cardAssets[number][1];
                    return (Transform(
                      transform: Matrix4.identity()
                        ..setEntry(3, 2, 0.001)
                        ..rotateY(val),
                      child: Container(
                        width: 200,
                        height: 350,
                        child: isFront 
                        ? Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage('assets/Images/$pictureAsset')
                              )
                            )
                          )
                        : Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage('assets/Images/$pictureAsset')
                              )
                            )
                          )
      
                          // String audioasset = 'assets/Sounds/$soundAsset';
                          // ByteData bytes = await rootBundle.load(audioasset); //load sound from assets
                          // Uint8List soundbytes = bytes.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
                          // int result = await player.playBytes(soundbytes);
                          
                      )
                      )
                    );
                  }
                ),
        ),
      )
    );
  }
}

今のところサンプルは数個しかありませんが、最終的には 104 個になります。

List<List<String>> cardAssets = [
  ['IceWizardCard.webp','IceWizardSound.mp3','6'],
  ['MegaKnightCard.webp','MegaKnightSound.mp3','6'],
  ['WizardCard.webp','WizardSound.mp3', '4'],
];

私はマッピング機能を認識していますが、アセットアドレスが保存された配列の配列があるため、グリッドビュービルダーを使用しました。コメント付きのコードも気にしないでください。これは、特定のカードで特定のオーディオを再生するために使用されます。

皆さんに感謝します！