CODEWITHSUNDEEP
flutterdart
Ankit
Ankit

Reputation: 669

Radio List Tile padding not working in flutter

I am trying to build a flutter application which uses the radio buttons. But radio List tile have lot of padding and they are not getting displayed perfectly.

I tried to provide each of the MainAxisAlignment to the row widget but none of them worked. I want them in a single line irrespective of the screen width.

This is how it is getting displayed:

enter image description here

Following is my code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'LoginValidate.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:http/http.dart' as http;

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  int _groupValue = 0;

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return Scaffold(
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Login',
              style: TextStyle(
                color: Colors.lightBlue[900],
                fontFamily: 'OpenSans',
                fontSize: 30.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 30.0),
            buildoptionsforsignin(),
          ],
        ),
      )
    );
  }

  buildoptionsforsignin() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          flex: 1,
          child: RadioListTile(
            value: 0,
            groupValue: _groupValue,
            title: Text("Email"),
            onChanged: (newValue) =>
                setState(() => _groupValue = newValue),
            activeColor: Colors.lightBlue[900],
            selected: true,
          ),
        ),
        Expanded(
          flex: 1,
          child: RadioListTile(
            value: 1,
            groupValue: _groupValue,
            title: Text("Phone"),
            onChanged: (newValue) =>
                setState(() => _groupValue = newValue),
            activeColor: Colors.lightBlue[900],
            selected: false,
          ),
        ),
        Expanded(
          flex: 1,
          child: RadioListTile(
            value: 2,
            groupValue: _groupValue,
            title: Text("Username"),
            onChanged: (newValue) =>
                setState(() => _groupValue = newValue),
            activeColor: Colors.lightBlue[900],
            selected: false,
          ),
        ),
      ],
    );
  }

}

Can anyone please help me?

Upvotes: 0

Views: 2863

Answers (1)

cas
cas

Reputation: 807

The problem is that ListTile and Radio are material widgets with their own internal padding. you can somewhat override this by setting the contentPadding and the dense parameters:

RadioListTile(
   contentPadding: EdgeInsets.all(0),
   dense: true,
   ...
),

you can also change the text wrapping behaviour by changing the Text Overflow parameter:

RadioListTile(
   title: Text(
       "Username", 
       overflow: TextOverflow.ellipsis,
   ),
),

If this is not enough for you you're best of creating your own ListTile widget by using an InkWell, Row, ...

Upvotes: 2

Related Questions