如何在 ListView.builder 中使用 RadioListTile？

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),
    );
  },
),

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,
    );
  }
}

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