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

How can I make a Row with a Textfield and two stacked radio buttons in Flutter?

I have a TextField to enter the year and two RadioListTiles for AD or BC. I would like to have a Row with the TextField first, and then the RadioListTiles stacked after that and in a smaller font size. Can someone help?

Here’s what it looks like now:

enter image description here

And here is the code:

          TextField(
              focusNode: inputNode,
              autofocus: true,
              keyboardType: const TextInputType.numberWithOptions(),
              controller: yearController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: "Enter the Year of the Event",
              )),

          Row(
            children: [
          
              Flexible(
                child: RadioListTile<Era>(
                  title: const Text('A.D.'),
                  value: Era.ad,
                  groupValue: _era,
                  onChanged: (Era? value) {
                    setState(() {
                        _era = value;
                      });
                  },
                ),
          
              ),
          
              Flexible(
              child: RadioListTile<Era>(
                title: const Text('B.C.'),
                value: Era.bc,
                groupValue: _era,
                onChanged: (Era? value) {
                  setState(() {
                      _era = value;
                    });
                },
                ),
              ),
          
            ],
          ),
Tags:

2

Answers


  1. 0

    You can do something like following to show textfield first and make sure to wrap textfield in Expanded as to constraint it to available space.

    Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(
      child: TextField(
        autofocus: true,
        keyboardType: const TextInputType.numberWithOptions(),
        controller: yearController,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: "Enter the Year of the Event",
        ),
      ),
    ),
    _buildRadio('A.D.', Era.ad),
    _buildRadio('B.C.', Era.bc),
  ],
),

    Also, use Radio with a combination of Row and Text widgets to properly show them in a small view, as RadioListTile comes with a lot of default padding and other configurations that is not desirable.

    Radio<Era>(
  value: value,
  groupValue: _era,
  onChanged: (Era? value) {
    setState(() {
      _era = value;
    });
  },
),
Text(
  label,
  style: TextStyle(
    fontSize: 10,
  ),
),
    Login or Signup to reply.
  2. 0

    This is how I would approach this:

    import 'package:flutter/material.dart';

 enum Era { ad, bc }

class YearInputWidget extends StatefulWidget {
@override
_YearInputWidgetState createState() => _YearInputWidgetState();
}

class _YearInputWidgetState extends State<YearInputWidget> {
  final TextEditingController yearController = TextEditingController();
  final FocusNode inputNode = FocusNode();
  Era? _era;

@override
Widget build(BuildContext context) {
return Row(
  children: [
    // TextField for Year Input
    Expanded(
      flex: 2,
      child: TextField(
        focusNode: inputNode,
        autofocus: true,
        keyboardType: const TextInputType.numberWithOptions(),
        controller: yearController,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: "Enter the Year of the Event",
        ),
      ),
    ),

    // Column for the RadioListTiles
    Expanded(
      flex: 1,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          RadioListTile<Era>(
            title: Text(
              'A.D.',
              style: TextStyle(fontSize: 12.0),
            ),
            value: Era.ad,
            groupValue: _era,
            onChanged: (Era? value) {
              setState(() {
                _era = value;
              });
            },
          ),
          RadioListTile<Era>(
            title: Text(
              'B.C.',
              style: TextStyle(fontSize: 12.0),
            ),
            value: Era.bc,
            groupValue: _era,
            onChanged: (Era? value) {
              setState(() {
                _era = value;
              });
            },
          ),
        ],
      ),
    ),
  ],
);

    }
    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search