State is not updating without hot reload

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.

CodePudding user response：

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"),
      ),
    ),
  ),
),

CodePudding user response：

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),
                ),
              ),
            ),
...