Flutter ListView一意な値の保持方法

Question

Flutter初学者です。

JSONからEntityオブジェクトを介してListView.builderウィジェットで一覧表示しています。
そのリストのonTapイベントで該当行の詳細画面を遷移させたいのですが、一意なレコードキーの保持方法がわかりません。

JSですと、domにdata-hogehogeなどの独自属性を追加して管理していますが、同じ様な考え方で問題ないでしょうか？

<ul id='hoge-list'>
  <li　data-hogehoge='1'>aaaa</li>
  <li　data-hogehoge='2'>bbbb</li>
  <li　data-hogehoge='3'>cccc</li>
</ul>

<script>
const _li = document.querySelector('#hoge-list > li')
for(i = 0;i < _li.length;++i) {
  _li[i].addEventListener(() => {
  const _id = this.target.getAttribute('data-hogehoge');
  /* _idを使って非同期処理して画面表示の処理を書く */
});

}
</script>

その場合、各一覧にレコードキーをどの様に保持しますか？

Answer 1

flutterのListViewを使う場合、ネタ元になるデータリストがあるはずで、その中に必要なものをMapで管理するとか、データの持ち方工夫して上手くやれば何でもいいんじゃないでしょうか。

  static const itemList = [  // 行ごとにデータまとめて持っているなら、
    {'val': '犬', 'key': '1'},
    {'val': '猫', 'key': '2'},
    {'val': '猿', 'key': '3'},
  ];

  @override
  Widget build(BuildContext context) {

   ....

    child: ListView.separated(
      itemCount: itemList.length,
      itemBuilder: (ctx, i) {
        var val = itemList[i]['val'].toString();  // 行番号だけで何とでもなるはず

Web画面のDom上で各行にデータを持たせるやり方は別に必須というわけでは無く、要は「各行に表示した内容とデータの関連が、プログラム的に管理出来ていれば何でもいい」だと思うので、まずレコードにデータを独自属性的なもので埋め込む、というイメージは一旦リセットして考えていいんじゃないかと。

（ちなみにWebでDOMに属性で追加して管理するやり方自体は、それが分かりやすくて簡単だからという事で、ダメと言っているわけでは無いので悪しからず。Flutterに同機能があるかどうかは知らないです）

試しにListViewから画面遷移するコードを書いてみたので参考に置いておきます。

DartPad (Runボタンで実行可能)

※僕もFlutterはさわり始めたばかりなので、もっといいやり方、いろんな方法があると思います。あくまで参考ということで。

Comments

[HS1111]

ご丁寧に有難御座います。
お陰さまで解決出来ました！

私の実装に問題がありました。

画面が少々複雑でwidgetツリーが大きく見通しが悪かったので、部品ごとにコンポーネントに切り出しておりましたが、関数コンポーネントで作ってしまっていたため値の受け渡しに難がありました。
クラスコンポーネントに変更し対応しました。

にせよwidget構造は初学者の壁ですね・・
（慣れかもしれませんが、ロジック以外の所で立ち止まってしまいますｗ）