RadioListTile Flutter in loop

Question

I have a problem with RadioListTile it doesn't work

Im trying to create a list of RadioListTile to fill in with my data from firebase using for loop. When I click it it do receive the action, but I cannot check the box when click on it.

I have been trying to solve it for days. Anyone can help?

This is my code:

import 'package:eatwell/src/helpers/changescreen.dart';
import 'package:eatwell/src/model/itemmodel.dart';
import 'package:eatwell/src/model/platemodel.dart';
import 'package:eatwell/src/pages/cartPage.dart';
import 'package:eatwell/src/provider/customplate.dart';
import 'package:eatwell/src/provider/item.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CustomDetail extends StatefulWidget {
  final CustomModel custom;

  const CustomDetail({Key key, this.custom}) : super(key: key);

  @override
  _CustomDetail createState() => _CustomDetail();
}

class _CustomDetail extends State<CustomDetail> {
  @override
  Widget build(BuildContext context) {
    final carbsProvider = Provider.of<CarbsProvider>(context);
    var mycarb = 1;
    return Scaffold(
        appBar: AppBar(
          title: Text(
            "Preset Meal",
            style: TextStyle(
              fontSize: 30.0,
              fontWeight: FontWeight.bold,
              color: Colors.black,
              fontFamily: 'DancingScript',
            ),
          ),
          centerTitle: true,
          actions: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 8.0, right: 8.0),
              child: Stack(
                children: <Widget>[
                  IconButton(
                      icon: Icon(
                        Icons.shopping_bag_outlined,
                        size: 40,
                      ),
                      onPressed: () {
                        changeScreen(context, Cart());
                      }),
                  Positioned(
                    right: 3,
                    bottom: 0,
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                          boxShadow: [
                            BoxShadow(
                                color: Colors.grey,
                                offset: Offset(2, 3),
                                blurRadius: 3)
                          ]),
                      child: Padding(
                        padding: const EdgeInsets.only(left: 4, right: 4),
                        child: Text(
                          "2",
                          style: TextStyle(
                              color: Colors.red,
                              fontSize: 16.0,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
        body: SafeArea(
          child: ListView(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(
                    left: 20.0, right: 20, bottom: 10, top: 30),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.cyanAccent,
                    borderRadius: BorderRadius.circular(100),
                  ),
                  height: 300,
                  alignment: Alignment.center,
                  child: Image(
                    image: NetworkImage(widget.custom.image),
                    height: 300,
                    width: 300,
                  ),
                ),
              ),
              Text(
                widget.custom.name,
                style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              Text(
                ("RM ${widget.custom.price}"),
                style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),

              for (var i = 0; i < widget.custom.carbnum; i++)
                Column(
                  children: <Widget>[
                    ListTile(
                      title: Text("Choose Your Carbohydrates"),
                    ),
                    for (var i = 0; i < carbsProvider.carbs.length; i++)
                      RadioListTile(
                        title: Text(carbsProvider.carbs[i].name),
                        value: i,
                        onChanged: (var v) {
                          print("object");
                          mycarb = v;
                        },
                        groupValue: mycarb,
                      )
                  ],
                ),

              // for (var i = 0; i < widget.custom.fooditems.length; i++)
              //   Text(
              //     widget.custom.fooditems[i],
              //     style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
              //   )
            ],
          ),
        ));
  }
}

Answer 1

Wrap your onChanged in setState. just like

onChanged: (var v) {
  setState((){
    print("object");
    mycarb = v;
  });
},

Answer 2

According to the docs:

Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.

Use setState method in onChanged method of RadioListTile widget and as answered by Abdul Qadir.