flutterでGridViewのitemをタップして、そのitemに発火させたい

Question

FlutterでGridviewを使ってリスト表示させています。
それぞれアイテムはGestureDetectorで囲って「ontap」でクリックイベントを発火させるのですが、
現状タップした時に、全てのアイテムに発火してしまいます。
(コードを見直せば、そりゃそうだよなって理解はあるのですが...)

  bool checked = false;

  void _checked() {
    setState(() {
      checked = true;
    });
  }

  void _unchecked() {
    this.setState(() {
      checked = false;
    });
  }

  Widget recommendFromFamily() {
    return Container(
      margin: EdgeInsets.only(top: 10.0),
      child: Column(
        children: <Widget>[
          //アイテムリスト
          GridView.builder(
            shrinkWrap: true,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.8,
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
            itemCount: castsItems?.length ?? 3,
            itemBuilder: (BuildContext context, int index) {


                child: GestureDetector(
checked == false
                          ? Center(
                              child: Text(
                                'チェックする',
                                style: TextStyle(
                                  height: 2.3,
                                  color: Colors.amber,
                                  fontSize: 12,
                                  fontWeight: FontWeight.bold,
                                ),
                                textAlign: TextAlign.center,
                              ),
                            )
                          : Center(
                              child: Text(
                                'チェック取り消す',
                                style: TextStyle(
                                  height: 2.3,
                                  color: Colors.black87,
                                  fontSize: 12,
                                  fontWeight: FontWeight.bold,
                                ),
                                textAlign: TextAlign.center,
                              ),
                            )
　　　　　　　　　　　onTap: () {
                    castId = index;
                    print(index);
                    if (checked == true) {
                      _checked();
                    } else if (checked == true) {
                      _unchecked();
                    }
                  },
                ),

            },
          ),
        ],
      ),
    );
  }

これを、タップした要素のみにSetStateを制御したいのですが、それを実現するにはどのようにするのでしょう？
ご教授よろしくお願いいたします。

追記 9/19 16:37
onTapの条件分岐コードに関係のないものが混じっていたので修正しました。

Answer 1

はじめに、チェックされている要素を格納するための配列を用意します。

-  bool checked = false;
+  final List<int> checkedList = [];

次に、

• チェックする時は、この配列に入れる
• チェックを外す時は、この配列から取り除く

ようにします。

  void _check(int index) {
    setState(() {
      checkedList.add(index);
    });
  }

  void _uncheck(int index) {
    this.setState(() {
      checkedList.remove(index);
    });
  }

「ある要素が選択されているかどうか」は、以下のようにcontainsを使って判定することができます。

itemBuilder: (BuildContext context, int index) {
  final bool checked = checkedList.contains(index);

---

最後に、質問のコードに最小限の修正を加えたコードを貼っておきます。

  int castId = 0;

  // チェックされたものを格納するための配列
  final List<int> checkedList = [];

  void _checked(int index) {
    setState(() {
      checkedList.add(index);
    });
  }

  void _unchecked(int index) {
    setState(() {
      checkedList.remove(index);
    });
  }

  Widget recommendFromFamily() {
    return Container(
      margin: EdgeInsets.only(top: 10.0),
      child: Column(
        children: <Widget>[
          //アイテムリスト
          GridView.builder(
            shrinkWrap: true,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.8,
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
            itemCount: castsItems?.length ?? 3,
            itemBuilder: (BuildContext context, int index) {
              // ここで要素ごとにチェックされているか判定
              final bool checked = checkedList.contains(index);
              return GestureDetector(
                child: checked == false
                    ? Center(
                        child: Text(
                          'チェックする',
                          style: TextStyle(
                            height: 2.3,
                            color: Colors.amber,
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                          ),
                          textAlign: TextAlign.center,
                        ),
                      )
                    : Center(
                        child: Text(
                          'チェック取り消す',
                          style: TextStyle(
                            height: 2.3,
                            color: Colors.black87,
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                onTap: () {
                  castId = index;
                  print(index);
                  if (checked) {
                    _unchecked(index);
                  } else {
                    _checked(index);
                  }
                },
              );
            },
          ),
        ],
      ),
    );
  }

Comments

[Yariii]

できました！配列に出し入れして判定するのですか。知見が広がりました。
ありがとうございました！