How to use RadioListTile inside of a ListView.builder?

Question

I'm trying to make a selectable listview.

I chose RadioListTile ,but it doesn't need to be with Radios,I would be happy with the background color changing of a ListTile on tapping the item. So in my current code I have RadioListTiles,but it doesn't checks on tap,and I think it would let to check more than one,because its in a ListView.builder,but I don't know since I'm new to flutter,and it's not working.

Here is the code:

ListView.builder(
  scrollDirection: Axis.vertical,
  itemCount: items.length,
  itemBuilder: (context, index) {
    return RadioListTile<LoadList>(
      selected: isSelected,
      groupValue: radiolist,
      value: items[index],
      onChanged: (LoadList value) {
        radiolist.GetHours(value.hours);
        print("CurrentSelected $index");
        setState(() {
          isSelected = true;
        });
      },
      title: new Text(index),
    );
  },
),

Feathery

what is loadlist , radiolist, items kindly tell me about it. i want to do it same but cant do it – Luminesce

Answer 1

Radios are actually very simple in flutter. Basically, they're a list of items each with a value, and there's a shared selected value. The state maintains the shared selected value.

Basically, all you need to do is keep track of that selected value and change it when the list items are pressed. And for each of the items, you check if the shared selected value equals the item's value.

The RadioListItem just helps that along a little bit by doing the equality part for you. This should do what you want.

import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: RadioListBuilder(
          num: 20,
        ),
      ),
    );
  }
}

class RadioListBuilder extends StatefulWidget {
  final int num;

  const RadioListBuilder({Key key, this.num}) : super(key: key);

  @override
  RadioListBuilderState createState() {
    return RadioListBuilderState();
  }
}

class RadioListBuilderState extends State<RadioListBuilder> {
  int value;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return RadioListTile(
          value: index,
          groupValue: value,
          onChanged: (ind) => setState(() => value = ind),
          title: Text("Number $index"),
        );
      },
      itemCount: widget.num,
    );
  }
}

Demetrius

Appreciate you answer! This is very similar to my code,however I tried it, if I put a print in onChanged its printed,with right index,but the Radio isn't checking,same as my code... Also how can I change the color of the Radio when tapped? – Feathery

check if you have this " groupValue: value," in your code – Peloria

hi @Demetrius kindly solve my problem if you can #68209475 – Luminesce

Answer 2

Check below code sample to use the radio buttons dynamiccaly.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: _options
      .map((e) => new Column(
            children: [
              Container(
                margin: EdgeInsets.symmetric(vertical: 5),
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(12.0),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: e.subOptions
                      .map((x) => RadioListTile(
                            value: x.optionBit, //set this to parent object of the 
                                                //group which determines the selected option.
                            groupValue: e.optionBit,
                            onChanged: (value) {
                              setState(() {
                                e.optionBit = value;
                              });
                            },
                            title: new Text(
                              x.text,
                            ),
                          ))
                      .toList(),
                ),
              )
            ],
          ))
      .toList(),
),

Benisch