title: How to have four of the same custom widget have text change individually?
body: <p>I am looking to create a grid with 4 custom widgets that can either add or subtract from a given starting number. <a href="https://i.stack.imgur.com/7BmBt.jpg" rel="nofollow noreferrer">See image for reference.</a>
  For example, if you press player one, the number would increase or decrease to 100 or 99. But the other 3 players would remain the same.</p>
  
  <p>I had originally used one stateful widget with a separate function for each player, but I am sure there's a way to do it in a more modular way.</p>
  
  <pre><code>class CommanderDamage extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return CommanderDamageState();
    }
  }
  
  class CommanderDamageState extends State&lt;CommanderDamage&gt; {
    int damage = 0;
  
    void update() {
      setState(() {
        damage++;
      });
    }
  
    @override
    Widget build(context) {
      return MaterialApp(
        home: Scaffold(
          body: GridView.builder(
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemCount: 4,
            itemBuilder: (BuildContext context, index) {
              return Container(
                child: Column(
                  children: &lt;Widget&gt;[
                    Text("Player " + index.toString()),
                    InkWell(
                      onTap: update,
                      child: Container(
                          width: 100.0,
                          height: 100.0,
                          child: Text(damage),
                    )
                  ],
                ),
              );
            },
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>EDIT: I have edited my code to reflect my current. Currently, when the damage area is pressed, the damage increases for all 4 players instead of the one I am pressing.</p>