CODEWITHSUNDEEP
flutter
Denise
Denise

Reputation: 1088

How to remove/adjust the space between RadioListTiles inside ListView?

I have created a ListView of RadioListTiles, however there is too much space between the RadioListTiles. How can I remove them? There is no property of padding inside its constructor.

This is my code 

 @override Widget build(BuildContext context) {

    Column taskView = Column(

      children: <Widget>[  
        ...,
        Expanded(
          child: ListView.builder(
            padding: EdgeInsets.all(0.0),
            itemCount: tasks.length,
            itemBuilder: (context, index) {
              return RadioListTile<String>(
                title:  Text(tasks[index]),
                value: tasks[index],
                groupValue: selectedRadio,
                onChanged: (val){
                    setSelectedRadio(val);
                }
              );
            },
          ),
        ),
      ],
    );
    return Scaffold(
      body: taskView,
    );
  }

enter image description here

Upvotes: 2

Views: 4751

Answers (5)

Amazed
Amazed

Reputation: 79

return RadioListTile(
                      contentPadding: EdgeInsets.zero,
                        dense: true,
                        value: name[index],
                        title: Transform.translate(
                          offset: Offset(-15, 0),
                          child: Text(
                            name[index].toString(),
                            style: TextStyle(fontSize: 12),
                          ),
                        ),
                        groupValue: _.currentname,
                        onChanged: (data) {
                          //on change function
                        });

Try with this simple widget i have using translate function and offset properties to negative 15points. Hope it will help you.

Upvotes: 1

Aziz
Aziz

Reputation: 479

To remove horizontal padding use this property:

   contentPadding: EdgeInsets.zero,

For vertical padding all I could do to decrease padding a little bit is:

   dense: true,

Upvotes: 1

Hemal Moradiya
Hemal Moradiya

Reputation: 2097

Wrap title with Align widget like this

RadioListTile<String>(
      title: Align(
        child: Text(tasks[index]),
        alignment: Alignment(-1.1, 0),
      ),
      value: tasks[index],
      groupValue: selectedRadio,
      onChanged: (val) {
        setSelectedRadio(val);
      },
    );

Upvotes: 3

Adnan haider
Adnan haider

Reputation: 553

if you want to remove space horizontally then use

       contentPadding: EdgeInsets.all(4.0),

inside RadioListTile which remove space bydefault is 16.0.

Upvotes: 1

Infusion Analysts
Infusion Analysts

Reputation: 489

you can try padding control to wrap your text or RadioListFile.. try this way..

return Padding(
        padding: const EdgeInsets.all(8.0),
        child: RadioListTile<String>(
            title:  Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(tasks[index]),
            ),
            value: tasks[index],
            groupValue: selectedRadio,
            onChanged: (val){
              setSelectedRadio(val);
            }
        ),
      );

Upvotes: 0

Related Questions