State is not updating without hot reload - flutter

Question

the case is, there is a payment methods screen and user have to choose one of the payment methods which are listed as images in column, when user taps a picture, an opacity to the other picture will apply and increases. i used this approach to implement the logic :

class _PaymentScreenState extends State<PaymentScreen> {
  int _value = 2;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("الدفع"),
        centerTitle: true,
        leading: GestureDetector(
          child: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Center(
        child: Column(
          children: [
            GestureDetector(
              onTap: () => setState(() {
                _value = 1;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Image(
                  image: AssetImage("assets/zainCashLogo.png"),
                  opacity: _value == 1
                      ? AlwaysStoppedAnimation(.9)
                      : AlwaysStoppedAnimation(.1),
                ),
              ),
            ),
            GestureDetector(
              onTap: () => setState(() {
                _value = 2;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Image(
                  image: AssetImage("assets/OrangeMoneyLogo.png"),
                  opacity: _value == 2
                      ? AlwaysStoppedAnimation(.9)
                      : AlwaysStoppedAnimation(.1),
                ),
              ),
            ),
            GestureDetector(
              onTap: () => setState(() {
                _value = 3;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Image(
                  image: AssetImage("assets/UWalletLogo.jpg"),
                  opacity: _value == 3
                      ? AlwaysStoppedAnimation(.9)
                      : AlwaysStoppedAnimation(.1),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

now the problem is when user taps on a photo nothing happens live the value is changing but the UI is not, i have to hot reload in order to apply the changes on the UI, how can we refresh the UI in my case, ill be thankful for any help.

Answer 1

You can use AnimatedOpacity widget.

GestureDetector(
  onTap: () => setState(() {
    _value = 1;
  }),
  child: AnimatedOpacity(
    duration: Duration(milliseconds: 100),
    opacity: _value == 1 ? .9 : .1,
    child: Container(
      height: 200,
      width: 200,
      child: Image(
        image: AssetImage("assets/alice.png"),
      ),
    ),
  ),
),

Answer 2

Do this instead: Also apply to the rest of the places

...
GestureDetector(
              onTap: (){///This is not a return type
                   setState(() {
                       _value = 1;
                                });
                    
              },
              child: Container(
                height: 200,
                width: 200,
                child: Image(
                  image: AssetImage("assets/zainCashLogo.png"),
                  opacity: _value == 1
                      ? AlwaysStoppedAnimation(.9)
                      : AlwaysStoppedAnimation(.1),
                ),
              ),
            ),
...