title: Difference between flutter onTap() and javascript/jquery $(this) in click listener
body: <p>I'm still in the process of learning dart/flutter.  I'm experimenting with ListView/ListTile and specifically onTap() from ListTile.</p>
  
  <p>I'm somewhat familiar with JS/Jquery and am having trouble understanding the differences in approach between JS and flutter.</p>
  
  <p>Please try to ignore any semantic or technical errors in the code below.  I'm more concerned with theory/approach than if this is a perfectly formatted and syntactically correct example.</p>
  
  <p>In JS, it's common to do something like make an AJAX call to an API to get a list of items for sale from a database.  Assume the API returned 4 fields (primary key ID, isAvailable, item name, and item price).  You then process the list and create/insert DOM elements for display.  </p>
  
  <pre><code>&lt;div id="234" data-isavailable="y" class=".itemsForSale"&gt;TV: $800&lt;/div&gt;
  &lt;div id="345" data-isavailable="y" class=".itemsForSale"&gt;Microwave: $200&lt;/div&gt;
  &lt;div id="456" data-isavailable="n" class=".itemsForSale"&gt;Book: $30&lt;/div&gt;
  &lt;div id="567" data-isavailable="y" class=".itemsForSale"&gt;Sofa: $450&lt;/div&gt;
  </code></pre>
  
  <p>You can then set listeners arbitrarily.  For instance, you could do...</p>
  
  <pre><code>$( ".itemsForSale" ).click(function() {
     // do something
  });
  </code></pre>
  
  <p>The click handler gets applied in "real-time".  The code executed is aware of what was clicked and can analyze/interact with that item in the list.  So, you can do something like:</p>
  
  <pre><code>$( ".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') );
  });
  </code></pre>
  
  <p>The point being, that the click handler doesn't necessarily know or care about the underlying data of each item.  It becomes "context" aware during runtime and then pulls the relevant values out of the UI/etc.</p>
  
  <p>With flutter, I'm looking to recreate similar functionality using a ListView and ListTile.  Specifically, ListTile's onTap(). I'm getting confused because it seems like everything is coded "ahead of time".  </p>
  
  <p>Here is a basic example (ignore for now I'm not displaying price/etc)...</p>
  
  <pre><code>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
                    } 
                  );
                }
              )
      );
    }
  
  }
  </code></pre>
  
  <p>First of all, I'm not even sure I need to assign a custom key to each ListView item (based on the database's primary key), but that's irrelevant for now.</p>
  
  <p>What I'm getting stuck on is that the onTap handler doesn't seem to have an equivalent of "$(this)".  Does flutter give each ViewTile it's "own" copy of onTap() and that each relevant key info is "hardcoded" into each one (for each itemBuilder loop, the current value of mapper.keys.elementAt(index).toString() is substituted into onTap() )?</p>
  
  <p>I'm probably not describing my confusion properly and I'm not even sure all of the issues I'm going to run into.  I'm sure my way of doing this is very "old" and not aligned with react and other newer approaches/frameworks (combining data within the UI elements).</p>
  
  <p>I'm just having trouble seeing how I'm going to be able to add more complex logic (like checking availability of what was clicked).  </p>
  
  <p>Does anyone have any references or explanations that help me bridge this gap?  I don't even know how to describe the concept of $(this) and how I would search for it in comparison to flutter/etc.  I just know that something feels very different.</p>
  
  <p>Thanks!</p>