CODEWITHSUNDEEP
androidflutterdart
Liam Park
Liam Park

Reputation: 511

Flutter dart: How to separate the space between Text and TextField and also bring together RadioListTile?

I'm learning Flutter. I have a problem (see image below). I would like to separate the space between Text "sex" and TextField "name". I would also like to bring together RadioListTile, they are very separate. Is it possible to do that? Follow my code

enter image description here

class _AlertDialogWidgetState extends State<AlertDialogWidget> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: ListBody(
        children: <Widget>[
          TextField(
            autofocus: true,
            decoration: InputDecoration(
                contentPadding: new EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
                border: OutlineInputBorder(), hintText: "New user"),
            onChanged: (text) => widget.name = text,
          ),
          Text(
            'Sex',
            textAlign: TextAlign.left,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          RadioListTile(
            title: Text("Female"),
            value: "female",
            groupValue: widget.sex,
            onChanged: (String value) {
              setState(() {
                widget.sex = value;
              });
            },
          ),
          RadioListTile(
            title: Text("Male"),
            value: "male",
            groupValue: widget.sex,
            onChanged: (String value) {
              setState(() {
                widget.sex = value;
              });
            },
          ),
          RadioListTile(
            title: Text("Other"),
            value: "other",
            groupValue: widget.sex,
            onChanged: (String value) {
              setState(() {
                widget.sex = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

Upvotes: 1

Views: 1774

Answers (1)

Stewie Griffin
Stewie Griffin

Reputation: 5638

Wrap your TextField with Padding to put more space between TextField and Text like this:

Padding(
  padding: EdgeInsets.only(top: 15),
  child: Text(
    'Sex',
    textAlign: TextAlign.left,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
),

For RadioListTile, you cannot change the padding of radio, but you could use Radio wrapped with ListTile and set its alignment to have it closer to the title:

ListTile(
  title: Align(
    child: new Text("Female"),
    alignment: Alignment(-1.2, 0),
  ),
  leading: Radio(
    value: "female",
    groupValue: 'F',
    onChanged: (String value) {
      setState(() {
        widget.sex = value;
      });
    },
  ),
)

Upvotes: 2

Related Questions