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),
);
},
),
A ListTile with a Radio. In other words, a radio button with a label. The entire list tile is interactive: tapping anywhere in the tile selects the radio button. The value, groupValue, onChanged, and activeColor properties of this widget are identical to the similarly-named properties on the Radio widget.
You can add radio buttons in the Flutter app with Radio() widget. You have to pass the value for the button, the group value which can be used to switch the selection among radio buttons and onChange event which can be used to get the changed value when clicked on radio button.
How do I put ListView builder inside column flutter? Using Expanded (Recommended) You can wrap your ListView widget inside the Expanded widget and this will allow the ListView to take all the available as long as the Column allows. Using shrinkWrap. Add the shrinkWrap property to the ListView and set it to True.
The ListView constructor requires us to create all items at once. This is good when list items are less and all will be seen on the screen, but if not then for long list items its not the good practice. the ListView. Builder constructor will create items as they are scrolled onto the screen like on-demand.
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,
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With