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

Question

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

Answer 1

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

Answer 2

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,

Answer 3

Code given above is correct when using RadioListTile horizontally just give it a fixed or calculated width

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