Разница между флаттером onTap() и javascript/jquery $(this) в прослушивателе кликов

Я все еще в процессе обучения дартс/флаттеру. Я экспериментирую с ListView/ListTile и, в частности, с onTap() из ListTile.

Я немного знаком с JS/Jquery, и мне трудно понять различия в подходах между JS и флаттером.

Пожалуйста, постарайтесь игнорировать любые семантические или технические ошибки в приведенном ниже коде. Меня больше интересует теория/подход, чем если бы это был идеально отформатированный и синтаксически правильный пример.

В JS обычно делают что-то вроде вызова AJAX к API, чтобы получить список товаров для продажи из базы данных. Предположим, что API вернул 4 поля (идентификатор первичного ключа, isAvailable, название товара и цена товара). Затем вы обрабатываете список и создаете/вставляете элементы DOM для отображения.

<div id = "234" data-isavailable = "y" class = ".itemsForSale">TV: $800</div>
<div id = "345" data-isavailable = "y" class = ".itemsForSale">Microwave: $200</div>
<div id = "456" data-isavailable = "n" class = ".itemsForSale">Book: $30</div>
<div id = "567" data-isavailable = "y" class = ".itemsForSale">Sofa: $450</div>

Затем вы можете установить слушателей произвольно. Например, вы могли бы сделать...

$( ".itemsForSale" ).click(function() {
   // do something
});

Обработчик кликов применяется в «реальном времени». Выполняемый код знает, что было нажато, и может анализировать/взаимодействовать с этим элементом в списке. Итак, вы можете сделать что-то вроде:

$( ".itemsForSale" ).click(function() {
    var isAvailable = $(this).attr('data-isavailable');
    if ( isAvailable == 'n' )
      alert('sorry but that item is out of stock!');
    else
      addItemToCart( $(this).attr('id') );
});

Дело в том, что обработчик кликов не обязательно знает или заботится о базовых данных каждого элемента. Он становится «контекстным» во время выполнения, а затем извлекает соответствующие значения из пользовательского интерфейса и т. д.

С флаттером я хочу воссоздать аналогичную функциональность, используя ListView и ListTile. В частности, onTap() в ListTile. Я путаюсь, потому что кажется, что все закодировано «наперед».

Вот базовый пример (не обращайте внимания на то, что я не показываю цену/и т. д.)...

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {

  var mapper = {
    '234': 'TV',
    '345': 'Microwave',
    '456': 'Book',
    '567': 'Sofa'
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Second Screen"),
        ),
        body:
            ListView.builder(  
              padding: const EdgeInsets.all(8.0),
              itemCount: mapper.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  key: new Key(mapper.keys.elementAt(index).toString()),
                  title: Text('${mapper.values.elementAt(index)}'),
                  onTap: () {
                    print('you clicked: ' + mapper.keys.elementAt(index).toString() );
                    addToShoppingCart( mapper.keys.elementAt(index).toString() ); // this doesnt exist yet and is just an example
                  } 
                );
              }
            )
    );
  }

}

Прежде всего, я даже не уверен, что мне нужно назначать пользовательский ключ каждому элементу ListView (на основе первичного ключа базы данных), но сейчас это не имеет значения.

Я застрял на том, что обработчик onTap, похоже, не имеет эквивалента «$ (this)». Предоставляет ли флаттер каждому ViewTile свою «собственную» копию onTap() и что каждая соответствующая ключевая информация «жестко закодирована» в каждом из них (для каждого цикла itemBuilder текущее значение mapper.keys.elementAt(index).toString() равно заменен на onTap() )?

Я, вероятно, неправильно описываю свое замешательство, и я даже не уверен во всех проблемах, с которыми столкнусь. Я уверен, что мой способ сделать это очень «старый» и не соответствует реакции и другим новым подходам/фреймворкам (объединение данных в элементах пользовательского интерфейса).

Я просто не понимаю, как я смогу добавить более сложную логику (например, проверку доступности того, что было нажато).

Есть ли у кого-нибудь ссылки или объяснения, которые помогут мне преодолеть этот пробел? Я даже не знаю, как описать концепцию $(this) и как ее искать по сравнению с flutter/etc. Я просто знаю, что что-то чувствуется совсем по-другому.

Спасибо!