Search code examples
flutterdartradiobuttonlist

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


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

Solution

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