Buggy Buttons

main.dart

// You’re making a shopping app called RubberBaby, which sells dolls. Unfortunately, you’ve run into
// a problem on the order page. If a customer makes one order for blue dolls and another order for 
// red dolls but then tries to delete the blue doll order, the red doll order is wrong.
// Given only the following code, how would you fix the RubberBaby buggy buttons?

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: _OrderPage(),
        ),
      ),
    );
  }
}

class _OrderPage extends StatefulWidget {
  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<_OrderPage> {
  bool isShowing = true;
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
        onPressed: () {
          setState(() {
            isShowing = false;
          });
        },
        child: const Text('Delete blue'),
      ),
      if (isShowing)
        const CounterButton(
          color: Colors.blue,
        ),
      const CounterButton(
        color: Colors.red,
      ),
    ]);
  }
}

class CounterButton extends StatefulWidget {
  final Color color;
  const CounterButton({Key? key, required this.color}) : super(key: key);

  @override
  State<CounterButton> createState() => _CounterButtonState();
}

class _CounterButtonState extends State<CounterButton> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(4),
      color: widget.color,
      width: 100,
      height: 50,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          setState(() {
            _count++;
          });
        },
        child: Center(child: Text('$_count')),
      ),
    );
  }
}