flutterformattingradio-button

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


Here's what my UI looks like right now:

enter image description here

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),
                          ),
                      ],
                    ),
                  ]))
            ]),

Solution

  • 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:

    enter image description here

    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),
                              ),
                          ],
                        ),
                      ]),
                  )
                ]),