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

rahaf aldrwish 0
Viewed 39

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;
                      });
                    },
                  );
                },
              ),
radiobuttonlist dart flutter
2 Answers
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,

aminjafari-dev0

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