Delete specific widget | Flutter & Riverpod

Question

As shown in the image, I'm trying to have a list of dice where I can add or delete a die. I've tried StateProvider, ChangeNotifier, and StateNotifier. Each one doesn't seem to work as I expect it to. I'm trying to make a provider that contains a list of dieWidgets, but I can't figure out how to remove a specific die when I longpress on it. The image shows a popup menu to delete it, that's the long-term goal, but just a longpress delete would be good for now. Thoughts on how to approach this?

Code

main.dart

class DiceNotifier extends ChangeNotifier {
  List<DieWidget> dice = [];

  void add() {
    dice.add(DieWidget());
    notifyListeners();
  }

  void removeDie(int id) {
    // FIXME: Unable to delete a die based on id
    print(id);
    notifyListeners();
  }
}

final diceProvider = ChangeNotifierProvider((_) {
  return DiceNotifier();
});

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final dice = watch(diceProvider).dice;
    return Scaffold(
      appBar: AppBar(
        title: Text("Dice"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ...dice,
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(diceProvider).add();
        },
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

die_widget.dart

class DieWidget extends StatefulWidget {
  @override
  _DieWidgetState createState() => _DieWidgetState();
}

class _DieWidgetState extends State<DieWidget> {
  int value = 0;
  int id = 0;
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text(
        '$value',
      ),
      onPressed: () {
        setState(() {
          value++;
          id++;
        });
        // context.read(dieProvider).increment();
      },
      onLongPress: () {
        final dice = context.read(diceProvider);
        dice.removeDie(id);
        // print(this.value);
      },
    );
  }
}

Answer 1

One solution would be to define a parameter value in the DiceWidget class:

class DiceWidget extends StatefulWidget {
  const DiceWidget({ Key key, this.value }) : super(key: key);
  int value;
  @override
  _DiceWidgetState createState() => _DiceWidgetState();

}

And access this data from the DiceWidget:

class DiceWidget extends StatefulWidget {
  @override
  _DiceWidgetState createState() => _DiceWidgetState();
}

class _DiceWidgetState extends State<DiceWidget> {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text(
        widget.value.toString() ?? '',
      ),
      onLongPress: () {
        final dice = context.read(diceProvider);
        dice.removeDice(widget.value);
        // print(widget.value);
      },
    );
  }
}

In the DiceNotifier class, I'd recommend to implement the dices array as a List<int>:

List<int> dices = [];

Therefore, the addDice() and removeDice() functions will be, respectively:

class DiceNotifier extends ChangeNotifier {
  List<int> dices = [];

  void addDice() {
    dices.add(dices.length);
    notifyListeners();
  }

  void removeDice(int id) {
    dices.remove(id);
    print(id);
    notifyListeners();
  }
}

To make the example work, we need to modify the MyHomePage Column children as well, to build the list of DiceWidgets:

...dices.map((d) => DiceWidget(value: d)).toList(),

The whole example will then be: main.dart:

class DiceNotifier extends ChangeNotifier {
  List<int> dices = [];

  void addDice() {
    dices.add(dices.length);
    notifyListeners();
  }

  void removeDice(int id) {
    dices.remove(id);
    print(id);
    notifyListeners();
  }
}

final diceProvider = ChangeNotifierProvider((_) {
  return DiceNotifier();
});

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final dices = watch(diceProvider).dices;
    return Scaffold(
      appBar: AppBar(
        title: Text("Dice"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ...dices.map((d) => DiceWidget(value: d)).toList(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(diceProvider).addDice();
        },
        child: Icon(Icons.add),
      ), 
    );
  }
}

dice_widget.dart:

class DiceWidget extends StatefulWidget {
  @override
  _DiceWidgetState createState() => _DiceWidgetState();
}

class _DiceWidgetState extends State<DiceWidget> {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text(
        widget.value.toString() ?? '',
      ),
      onLongPress: () {
        final dice = context.read(diceProvider);
        dice.removeDice(widget.value);
        print(widget.value);
      },
    );
  }
}