Question 78106 in Flutter Question posted in
The official Flutter documentation can be found here.

How to set RadioLisTile widget take as minimum space as it needs – Flutter

I have used flexible widget here but that just dividing the space equaly for every widget.
But I want them to take as minimum as they need because some title has more lenth.

I have seen that If I dont give them Flexible or Extended widget on RadioListTile then it take infinity width and they got disapeare.

Here is my Code.

    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Text('Content 1'),
            Text('Content 2'),
            Row(
              children: [
                Flexible(
                  child: RadioListTile(
                    contentPadding: EdgeInsets.zero,
                    visualDensity: VisualDensity(horizontal: 0),
                    value: 'Straw/ Bamboo/ polyhtene/ plastic/ canvas',
                    groupValue: groupValue,
                    onChanged: onChangedMethod,
                    title: Text('Straw/ Bamboo/ polyhtene/ plastic/ canvas',
                        style: style),
                  ),
                ),
                Flexible(
                  child: RadioListTile(
                    contentPadding: EdgeInsets.zero,
                    visualDensity: VisualDensity(horizontal: 0),
                    value: 'Soil/ Brick',
                    groupValue: groupValue,
                    onChanged: onChangedMethod,
                    title: Text('Soil/ Brick', style: style),
                  ),
                ),
                Flexible(
                  child: RadioListTile(
                    contentPadding: EdgeInsets.zero,
                    visualDensity: VisualDensity(horizontal: 0),
                    value: 'Tin ( CICit)',
                    groupValue: groupValue,
                    onChanged: onChangedMethod,
                    title: Text('Tin ( CICit)', style: style),
                  ),
                ),
                Flexible(
                  child: RadioListTile(
                    contentPadding: EdgeInsets.zero,
                    visualDensity: VisualDensity(horizontal: 0),
                    value: 'Wood',
                    groupValue: groupValue,
                    onChanged: onChangedMethod,
                    title: Text('Wood', style: style),
                  ),
                ),
                Flexible(
                  child: RadioListTile(
                    contentPadding: EdgeInsets.zero,
                    visualDensity: VisualDensity(horizontal: 0),
                    value: 'Brick-Cement',
                    groupValue: groupValue,
                    onChanged: onChangedMethod,
                    title: Text('Brick-Cement', style: style),
                  ),
                ),
                Flexible(
                  child: RadioListTile(
                    contentPadding: EdgeInsets.zero,
                    visualDensity: VisualDensity(horizontal: 0),
                    value: 'Others',
                    groupValue: groupValue,
                    onChanged: onChangedMethod,
                    title: Text('Others', style: style),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );

This is my output

This is My OutPut

This is what I want to achive

enter image description here

Tags:

2

Answers


  1. 0

    RadioListTile wrap with container not Flexible and give width of container then use list view instead row and listview wrap with expanded widget

    return Scaffold(
  body: SafeArea(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Text('Content 1'),
        Text('Content 2'),
        Expanded(
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              Container(
                width: 200,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Straw/ Bamboo/ polyhtene/ plastic/ canvas',
                  onChanged: (val){},
                  groupValue: value,
                  title: Text('Straw/ Bamboo/ polyhtene/ plastic/ canvas',
                     ),
                ),
              ),
              Container(
                width: 200,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Soil/ Brick',
                  groupValue: value,
                  onChanged: (val){},
                  title: Text('Soil/ Brick', ),
                ),
              ),
              Container(
                width: 200,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Tin ( CICit)',
                  onChanged: (val){}, groupValue: value,
                  title: Text('Tin ( CICit)',),
                ),
              ),
              Container(
                width: 200,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Wood',
                  onChanged: (val){}, groupValue: value,
                  title: Text('Wood',),
                ),
              ),
              Container(
                width: 200,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Brick-Cement',
                  onChanged: (val){}, groupValue: value,
                  title: Text('Brick-Cement', ),
                ),
              ),
              Container(
                width: 200,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Others',
                    onChanged: (val){}, groupValue: value,
                  title: Text('Others',),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);
    Login or Signup to reply.
  2. 0

    You need to replace RadioListTile with Radio widget. Wrap horizontal dynamic text list widget with SizedBox & give fixed height.

    try this code:

    SizedBox(
  height: 80,
  child: Scrollbar(
    child: ListView(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      children: List.generate(
        radioListItem.length,
        (i) => Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Radio(
              value: radioListItem[i],
              groupValue: (value) {},
              onChanged: (value) {},
            ),
            Text(
              radioListItem[i],
            )
          ],
        ),
      ),
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search