How can I make a column of Radio Buttons closer in Flutter?

TMLynch
November 15, 2024
193 views
0 votes
2 Answers

Here’s what my UI looks like right now:

I can’t seem to get the AD and BC Radio buttons closer together. It looks like they are lined up with the top and bottom of the TextField.

I’ve tried adjusting MainAxisAlignment and CrossAxisAlignment, and also adding a SizedBox in between them. But they seem to always look like the picture shows.

Here is the code:

         Row(
            children: [
          
              Expanded(
                flex: 2,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                      focusNode: inputNode,
                      autofocus: true,
                      keyboardType: const TextInputType.numberWithOptions(),
                      controller: yearController,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: "Enter the Year",
                      ),
                      ),
                ),
              ),
          
              Expanded(
                flex: 1,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    
                    Row(
                      children: [
                        Radio<Era>(
                          value: Era.ad,
                          groupValue: _era,
                          onChanged: (Era? value) {
                            setState(() {
                              _era = value;
                            });
                          },
                          ),
                          const Text(
                            'A.D.',
                            style: TextStyle(fontSize: 10.0),
                          ),
                      ],
                    ),
          
                    Row(
                      children: [
                        Radio<Era>(
                          value: Era.bc,
                          groupValue: _era,
                          onChanged: (Era? value) {
                            setState(() {
                              _era = value;
                            });
                          },
                          ),
                          const Text(
                            'B.C.',
                            style: TextStyle(fontSize: 10.0),
                          ),
                      ],
                    ),
                  ]))
            ]),

Answers

Chosen as BEST ANSWER

I was able to solve the spacing issue by wrapping each of the Radio widgets in a SizedBox and gave them a height lower than the devTools was showing me is their size (which was 48). I gave them a height of 30 and it works.

Here's a pic:

And here's the code:

              Expanded(
                flex: 1,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    
                     Row(
                      children: [
                        SizedBox(
                          height: 30,
                          child: Radio<Era>(
                            value: Era.ad,
                            groupValue: _era,
                            onChanged: (Era? value) {
                              setState(() {
                                _era = value;
                              });
                            },
                            ),
                        ),
                          const Text(
                            'A.D.',
                            style: TextStyle(fontSize: 10.0),
                          ),
                      ],
                    ),
                                
                    Row(
                      children: [
                        SizedBox(
                          height: 30,
                          child: Radio<Era>(
                            value: Era.bc,
                            groupValue: _era,
                            onChanged: (Era? value) {
                              setState(() {
                                _era = value;
                              });
                            },
                            ),
                        ),
                          const Text(
                            'B.C.',
                            style: TextStyle(fontSize: 10.0),
                          ),
                      ],
                    ),
                  ]),
              )
            ]),

(Edit)

This one fixed using  dense: true, and wrapped with sized box

   Row(
          children: [
                Expanded(
                flex: 2,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                     // focusNode: inputNode,
                      autofocus: true,
                      keyboardType: const TextInputType.numberWithOptions(),
                    //  controller: yearController,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: "Enter the Year",
                      ),
                      ),
                ),
              ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  SizedBox(
                    height: 30,
                    child: RadioListTile<String>(
                      contentPadding: EdgeInsets.zero, // Removes extra padding
                      dense: true, // Makes the tile more compact
                      title: Text("A.D.",
                      textAlign: TextAlign.left,
                      ),
                      value: "A.D.",
                      groupValue: _selectedValue,
                      onChanged: (value) {
                        setState(() {
                          _selectedValue = value;
                        });
                      },
                    ),
                  ),
                  RadioListTile<String>(
                    contentPadding: EdgeInsets.zero,
                    dense: true,
                    title: Text("B.C.",
                    textAlign: TextAlign.left,
                    ),
                    value: "B.C.",
                    groupValue: _selectedValue,
                    onChanged: (value) {
                      setState(() {
                        _selectedValue = value;
                      });
                    },
                  ),
                
               
                ],
              ),
            ),
          ],
        ),

Please signup or login to give your own answer.

Click here to cancel reply.