how can i show list view as a horizontal radio list tile?-CodePudding

i have a list that was retrieved from the database and i want to show it as a horizontal radio button list. i tried to wrap it with a row but i got errors.

this my code that retrieved them vertically.

ListView.builder(
                shrinkWrap: true,
                itemCount: controller.doc.length,
                itemBuilder: (context, index) {
                  return RadioListTile(
                    title: Text(controller.doc[index]['id'],
                        style: TextStyle(color: textColor)),
                    groupValue: tag,
                    value: controller.doc[index]['id'],
                    activeColor: primary,
                    onChanged: (value) {
                      setState(() {
                        tag = value;
                      });
                    },
                  );
                },
              ),

CodePudding user response：

ListView.builder(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: controller.doc.length,
  itemBuilder: (context, index) {
    return RadioListTile(
      title: Text(controller.doc[index]['id'],
          style: TextStyle(color: textColor)),
      groupValue: tag,
      value: controller.doc[index]['id'],
      activeColor: primary,
      onChanged: (value) {
        setState(() {
          tag = value;
        });
      },
    );
  },
);

You have to use this scrollDirection: Axis.horizontal,

CodePudding user response：

RadioListTile is combination between Radio widget and ListTile. the ListTile will expand to the maximum width. that will caused error if you make your ListTile with scroll horizontally.

its because the widget failed to hasSize. if its a must to use ListTile , then this is one of solution

ListView.builder(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: 4,
  itemBuilder: (context, index) {
    return SizedBox(
      width: MediaQuery.of(context).size.width, //  <= give specific width
      child: RadioListTile(
        title: const Text("lorem Ipsum",
            style: TextStyle(color: Colors.blueGrey)),
        groupValue: false,
        value: false,
        activeColor: Colors.green,
        onChanged: (value) {},
      ),
    );
  },
),

other solution is , make your custom radiolistile, eg:

Row(
 children:[
   Radio()
   Expanded(child: Text()),
])