How to create dynamic Radio-Group in Flutter/Dart (Android)

Question

Below code i have used to create in simple android what i have to do for an Flutter/Dart, i am totally new to flutter/Android

  public static void setCustomRadioGroup(LinearLayout layout, Context context, ArrayList<String> setName, ArrayList<View> viewList) {
        int sizeOfList = setName.size();
        final RadioButton[] radioButtons = new RadioButton[setName.size()];
        RadioGroup radioGroup = new RadioGroup(context);
        System.out.println(layout.getTag()+"_RadioGroup"+"   this is tag from dynamic layout creation");
        //set this in constant afterweard while dry run
        radioGroup.setTag(layout.getTag()+"_RadioGroup");
//      /*  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
//                LinearLayout.LayoutParams.MATCH_PARENT,
//                LinearLayout.LayoutParams.WRAP_CONTENT
//        );
//        layout.addView(radioGroup, params);*/

        //radioGroup.setTag();//create the RadioGroup
        if (setName.size() < 3) {
            radioGroup.setOrientation(RadioGroup.HORIZONTAL);
        } else {
            radioGroup.setOrientation(RadioGroup.VERTICAL);
        }
        //or RadioGroup.VERTICAL
        for (int i = 0; i < setName.size(); i++) {
            radioButtons[i] = new RadioButton(context);
            radioButtons[i].setText(setName.get(i));
            String id = layout.getTag()+setName.get(i);
//            radioButtons[i].setId(id.hashCode());
           // Log.v("Selected", "New radio item id in Dynamic fiels: " + id.hashCode());

            radioGroup.addView(radioButtons[i]);
        }
        layout.addView(radioGroup);
        viewList.add(radioGroup);

Solution

options_item.dart

class OptionsItem {
  String productOptionCategGuid;
  String categoryName;
  String minSelectionRequired;
  String maxSelectionLimit;
  String selectedOption; //To store selected options
  List<Items> items;

  OptionsItem({
    this.productOptionCategGuid,
    this.categoryName,
    this.minSelectionRequired,
    this.maxSelectionLimit,
    this.selectedOption,
    this.items,
  });

  OptionsItem.fromJson(Map<String, dynamic> json) {
    this.productOptionCategGuid = json["ProductOptionCategGUID"].toString();
    this.categoryName = json["CategoryName"].toString();
    this.minSelectionRequired = json["MinSelectionRequired"].toString();
    this.maxSelectionLimit = json["MaxSelectionLimit"].toString();
    this.selectedOption = json["selectedOption"].toString();
    this.items = json["Items"] == null
        ? []
        : (json["Items"] as List).map((e) => Items.fromJson(e)).toList();
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data["ProductOptionCategGUID"] = this.productOptionCategGuid;
    data["CategoryName"] = this.categoryName;
    data["MinSelectionRequired"] = this.minSelectionRequired;
    data["MaxSelectionLimit"] = this.maxSelectionLimit;
    data["selectedOption"] = this.selectedOption;
    if (this.items != null)
      data["Items"] = this.items.map((e) => e.toJson()).toList();
    return data;
  }
}

items.dart

class Items {
  String optionItemGuid;
  String optionItemName;
  String price;

  Items({this.optionItemGuid, this.optionItemName, this.price});

  Items.fromJson(Map<String, dynamic> json) {
    this.optionItemGuid = json["OptionItemGuid"].toString();
    this.optionItemName = json["OptionItemName"].toString();
    this.price = json["Price"].toString();
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data["OptionItemGuid"] = this.optionItemGuid;
    data["OptionItemName"] = this.optionItemName;
    data["Price"] = this.price;
    return data;
  }
}

widget_item_flavour.dart

class WidgetItemFlavour extends StatefulWidget {
  final OptionsItem item;
  WidgetItemFlavour({this.item});

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

class _WidgetItemFlavourState extends State<WidgetItemFlavour> {
  String _selectedFlavour = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      // WAY 1
      /* children: flavourList
          .map((data) => RadioListTile(
                dense: true,
                activeColor: greenColor,
                contentPadding: EdgeInsets.zero,
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "${data.flavourName}",
                      style: TextStyle(color: black2, fontSize: 15),
                    ),
                    Text(
                      "${data.flavourPrice}",
                      style: TextStyle(color: black2, fontSize: 15),
                    ),
                  ],
                ),
                groupValue: _selectedFlavour,
                value: data.flavourId,
                onChanged: (val) {
                  setState(() {
                    print('Val: ' + val.toString());
                    _selectedFlavour = val;
                  });
                },
              ))
          .toList(), */
      //WAY 2 
      children: widget.item.items
          .map((data) => InkWell(
                onTap: () {
                  setState(() {
                    //var index = widget.item.items.indexOf(data);
                    //print('Ketan Index: ' + index.toString());
                    widget.item.selectedOption = data.optionItemGuid;
                    _selectedFlavour = data.optionItemGuid;
                  });
                },
                child: Row(
                  children: [
                    Radio(
                      activeColor: greenColor,
                      fillColor: MaterialStateProperty.all<Color>(greenColor),
                      visualDensity:
                          VisualDensity(horizontal: -4, vertical: -3),
                      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      value:
                          _selectedFlavour.trim() == data.optionItemGuid.trim()
                              ? true
                              : false,
                      groupValue: true,
                      onChanged: (value) {},
                    ),
                    SizedBox(width: 10),
                    Expanded(
                      child: Text(
                        "${data.optionItemName}",
                        style: TextStyle(color: black2, fontSize: 14),
                      ),
                    ),
                    Text(
                      "$currency_sign${data.price}",
                      style: TextStyle(color: black2, fontSize: 14),
                    ),
                  ],
                ),
              ))
          .toList(),
    );
  }
}

Comments

[Nomanur]

You can use this: pub.dev/packages/group_radio_button

[sushant singh]

Thanks, Way1 is working for me but 2nd one is not working for me.

[Ketan Ramani]

@sushantsingh both are working. Just design difference. :)

[sushant singh]

Maybe, but I stuck with the second one and lost 2-3 hrs,