RadioListTile does not select correctly

Question

I am Vaibhav Pathak. I have a a problem in using RadioListTile. I created two RadioListTile where on onChnaged property to call a function in which in call setState to set the value of selectedRadio variable to that value which I got from the function and It changed the variable value but does not reflect changes to the Ui means it does not select the pressed radio button.

My code is here :

showPaymentOptions() {
showModalBottomSheet(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(25.0),
            topRight: Radius.circular(25.0))),
    elevation: 8.0,
    context: context,
    builder: (context) {
      return Padding(
        padding: const EdgeInsets.all(15.0),
        child: Container(
            height: 240,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                        "Select Payment Method : ",
                        style: TextStyle(
                            color: Colors.black54,
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    SizedBox(
                      height: 7.0,
                    ),
                    Card(
                      elevation: 8.0,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Column(
                          children: <Widget>[
                            RadioListTile(
                                activeColor: myTheme.primaryColor,
                                title: Text("COD"),
                                value: 1,
                                groupValue: selectedPaymentMethod,
                                onChanged: (value) =>
                                    _changePayment(value)),
                            SizedBox(
                              height: 5.0,
                            ),
                            RadioListTile(
                                activeColor: myTheme.primaryColor,
                                title: Text("Paytm"),
                                value: 2,
                                groupValue: selectedPaymentMethod,
                                onChanged: (value) =>
                                    _changePayment(value)),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Stack(
                    alignment: Alignment.bottomCenter,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            "Pay ₹499",
                            style: TextStyle(
                                fontSize: 16.0,
                                fontWeight: FontWeight.bold),
                          ),
                          isOrderSuccessful
                              ? RaisedButton(
                                  onPressed: () =>
                                      placeOrder(selectedPaymentMethod),
                                  color: myTheme.primaryColor,
                                  textColor: Colors.white,
                                  child: Text(
                                    "Place Order",
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 16.0),
                                  ))
                              : CircularProgressIndicator(
                                  valueColor: AlwaysStoppedAnimation<Color>(
                                      myTheme.primaryColor))
                        ],
                      ),
                    ],
                  ),
                )
              ],
            )),
      );
    });

}

Code of setState function :

  _changePayment(int value) {
print(value);
print(selectedPaymentMethod);
setState(() {
  selectedPaymentMethod = value;
});

}

Answer 1

friends I have done it by myself. I used the StatefulBuilder widget and wrap the Column inside the column children I put my two ReadioListTile and in the onChanged property I put the _setStatewhich I got from the builder of StatefulBuilder and set the value of payment method variable to its value and then it works properly in which way I want it.

Answer Code :

StatefulBuilder(
                          builder: (context, _setState) {
                            return Column(
                              children: <Widget>[
                                RadioListTile(
                                    activeColor: myTheme.primaryColor,
                                    title: Text("Cash on Delivery"),
                                    value: 1,
                                    groupValue: selectedPaymentMethod,
                                    onChanged: (value) => _setState(() {
                                          selectedPaymentMethod = value;
                                        })),
                                RadioListTile(
                                    activeColor: myTheme.primaryColor,
                                    title: Text("Paytm"),
                                    value: 2,
                                    groupValue: selectedPaymentMethod,
                                    onChanged: (value) => _setState(() {
                                          selectedPaymentMethod = value;
                                        })),
                              ],
                            );
                          },
                        ),