List.map()から繰り返しインデックスを取得する。

質問

文字のリストを反復処理し、中のカードを画面上に配置する処理を"map"クラスで書きました。

コードでは、行を作り、"map"を使ってカード上のuserBoardを全て画面に出力しています。私は内部にいくつかのロジックを追加したいので、要素のidを取得する必要があります（テーピングイベント用）。 そのような方法はありますか？

実は、userBoard上の要素の特定のインデックスを取得したいのです。

コードです。

Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
            Row(
              children: userBoard
                  .map((element) => Stack(children: <Widget>[
                        Align(
                          alignment: Alignment(0, -0.6),
                          child: GestureDetector(
                            onTap: (() {
                              setState(() {
                                // print("element=${element.toString()}");
                                // print("element=${userBoard[element]}");
                              });
                            }),
                            child: SizedBox(
                              width: 40,
                              height: 60,
                              child: Card(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(5.0),
                                  ),
                                  child: Center(
                                    child: Text(element,
                                        style: TextStyle(fontSize: 30)),
                                  )),
                            ),
                          ),
                        )
                      ]))
                  .toList(),
            )
          ],
        ),
}

画像 - 各カードはマップの"要素"である。関数onTapのインデックスを取得したい。

どのように解決するのですか？

インデックスにアクセスするために、リストをマップに変換する必要があります。 asMap 演算子を使ってマップに変換する必要があります。

例

final fruitList = ['apple', 'orange', 'mango'];
final fruitMap = fruitList.asMap(); // {0: 'apple', 1: 'orange', 2: 'mango'}

// To access 'orange' use the index 1.
final myFruit = fruitMap[1] // 'orange'

// To convert back to list
final fruitListAgain = fruitMap.values.toList();

あなたのコード

userBoard.asMap().map((i, element) => MapEntry(i, Stack(
  GestureDetector(onTap: () {
    setState(() {
      // print("element=${element.toString()}");
      // print("element=${userBoard[i].toString()}");
    });
  }),
))).values.toList();