Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use RadioListTile inside of a ListView.builder?

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),
    );
  },
),
like image 778
Bojke Avatar asked Jan 21 '19 23:01

Bojke


People also ask

How do you use radio tile flutter?

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.

How do I add a Radiobutton in flutter?

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 you add ListView builder inside column in flutter?

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.

What is the difference between ListView and ListView builder in flutter?

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.


1 Answers

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,
    );
  }
}
like image 78
rmtmckenzie Avatar answered Oct 09 '22 05:10

rmtmckenzie