【初めてのFlutter】神経衰弱を作ってみた件🃏🃏🃏

余談

Flutter+Dartが本当に未経験だったので導入にかなり時間がかかりました。😅😅😅😅

前回

環境構築

とにかくこのあたりが辛かった🌶🌶

• Mac

• Flutter

• Dart

• Android Studio

• XCode

お世話になった記事

Flutterの環境構築(Mac編)｜Flutter基礎入門 by Flutter大学

Windows10上にFlutterの開発環境を構築する。 - Qiita

Flutterの環境構築 – rinoguchiブログ

ソースコード

カードの管理とグリッド表示

class Board extends StatelessWidget {
  final List<PlayingCard> cards;

  const Board(this.cards, {Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    Before? before;
    return GridView.count(
      crossAxisCount: 12,
      childAspectRatio: 0.7,
      children: cards
          .map((card) {
            return CardPage(GlobalKey<FlipCardState>(), card, (card, key, out) {
              if (before != null) {
                if (before!.card.number == card!.number) {
                  out();
                  before!.out();
                } else {
                  // XXXX???
                  // sleep(const Duration(seconds:1));
                  before!.state.currentState!.controller!.reset();
                  key.currentState!.controller!.reset();
                }
                before = null;
              } else {
                before = Before(key, card!, out);
              }
            });
          })
          .toList(),
    );
  }
}

カードの回転＋コールバック地獄

class CardPage extends StatefulWidget {
  final GlobalKey<FlipCardState> cardKey;
  final PlayingCard property;
  final Function(PlayingCard?, GlobalKey<FlipCardState>, Function) onReverse;

  const CardPage(this.cardKey, this.property, this.onReverse, {Key? key}) : super(key: key);


  @override
  CardState createState() => CardState();
}

class CardState extends State<CardPage> {
  bool isOut = false;

  out() {
    setState(() {
      isOut = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return isOut ? Container(
      width: 100,
      height: 100,
      color: Colors.white,
      child: const Center(
        child: Text("out"),
      ),
    ) : FlipCard(
      key: widget.cardKey,
      fill: Fill.fillBack,
      direction: FlipDirection.HORIZONTAL,
      front: Container(
        margin: const EdgeInsets.only(left: 1, right: 1),
        width: 100,
        height: 100,
        color: Colors.green,
        child: const Center(
          child: Text("click", textAlign: TextAlign.center),
        ),
      ),
      back: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Image(
              width: 20,
              height: 20,
              image: NetworkImage(widget.property.getImageURL()),
            ),
            Text(widget.property.number.toString()),
          ],
        ),
      ),
      onFlipDone: (isFront) {
        if (isFront && !isOut) {
         widget.onReverse(widget.property, widget.cardKey, out);
        }
      },
    );
  }
}

GitHub

GitHub - DolkMd/training-concentration