Why is there so much space between Rows in my Flutter code?

91 Views Asked by At
Positioned(
          bottom: 15,
          left: 15,
          child: SizedBox(
            height: 100,
            child: Column(
              children: [
                Row(
                  children: [
                    ElevatedButton(
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(40, 20),
                        backgroundColor: colorSet.buttonForeground,
                      ),
                      onPressed: () {},
                      child: Text(
                        'Once',
                        style: TextStyle(
                          color: colorSet.text,
                          fontSize: 12,
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 8,
                    ),
                    ElevatedButton(
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(40, 20),
                        backgroundColor: colorSet.buttonForeground,
                      ),
                      onPressed: () {},
                      child: Text(
                        'Specific Days',
                        style: TextStyle(
                          color: colorSet.text,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    ElevatedButton(
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(40, 20),
                        backgroundColor: colorSet.buttonForeground,
                      ),
                      onPressed: () {},
                      child: Text(
                        'Daily',
                        style: TextStyle(
                          color: colorSet.text,
                          fontSize: 12,
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 3,
                    ),
                    ElevatedButton(
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(40, 20),
                        backgroundColor: colorSet.buttonForeground,
                      ),
                      onPressed: () {},
                      child: Text(
                        'Weekly',
                        style: TextStyle(
                          color: colorSet.text,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ))

Hi, I am relatively new at flutter. I am trying to build a card for chores, and this particular part of the card is giving me problems. I have no idea, why is there so much vertical space between each row (each row basically having two buttons). I've tried several things, to solve this, but I give up for now and come here for advice. Thanks! Layout View.

1

There are 1 best solutions below

1
On

Try this, remove the Sizedbox(height:100)

I addition, you could remove the SizedBox(width : 8) inside your rows and try Row(mainAxisAlignment:MainAxisAlignment.spaceBetween, children:[]);

Positioned(
          bottom: 15,
          left: 15,
          child:  Column(
              children: [
                Row(
                 mainAxisAlignment:MainAxisAlignment.spaceBetween, 
                  children: [
                    ElevatedButton(
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(40, 20),
                        backgroundColor: colorSet.buttonForeground,
                      ),
                      onPressed: () {},
                      child: Text(
                        'Once',
                        style: TextStyle(
                          color: colorSet.text,
                          fontSize: 12,
                        ),
                      ),
                    ),
                    ElevatedButton(
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(40, 20),
                        backgroundColor: colorSet.buttonForeground,
                      ),
                      onPressed: () {},
                      child: Text(
                        'Specific Days',
                        style: TextStyle(
                          color: colorSet.text,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                    mainAxisAlignment:MainAxisAlignment.spaceBetween, 
                  children: [
                    ElevatedButton(
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(40, 20),
                        backgroundColor: colorSet.buttonForeground,
                      ),
                      onPressed: () {},
                      child: Text(
                        'Daily',
                        style: TextStyle(
                          color: colorSet.text,
                          fontSize: 12,
                        ),
                      ),
                    ),
                   
                    ElevatedButton(
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(40, 20),
                        backgroundColor: colorSet.buttonForeground,
                      ),
                      onPressed: () {},
                      child: Text(
                        'Weekly',
                        style: TextStyle(
                          color: colorSet.text,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
          ))