CODEWITHSUNDEEP
androidflutterflutter-layoutwidgetflutter-dependencies
Jaimin Modi
Jaimin Modi

Reputation: 1667

Displaying Equal Space between Widgets inside Row - Flutter

Below is the builder method that I have created to create my Widgets in flutter app :

Widget _buildParkingAndNagarSection(String title, Color colorBackground,
  double marginBox) {
return Expanded(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          padding: EdgeInsets.only(top: 20, left: 20),
          width: 153.5.w,
          height: 114.h,
          decoration: BoxDecoration(
              color: colorBackground,
              shape: BoxShape.rectangle,
              border: Border.all(
                  color: Color(0xFFF1F1F1),
                  width: 1.h
              ),
              borderRadius: BorderRadius.all(Radius.circular(10))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.asset(ic_bottom_home,
                  width: 44.w, height: 33.75.h, fit: BoxFit.fill),
              SizedBox(
                height: 20,
                width: 0,
              ),
              Text(
                title,
                style: TextStyle(
                    fontFamily: "Poppins",
                    fontSize: 14.sp,
                    color: Color(0xFF27303E)),
                softWrap: true,
                overflow: TextOverflow.fade,
              )
            ],
          ),
        )
      ],
    ));

Calling it as below inside Row:

Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildParkingAndNagarSection(
              Localization
                  .of(context)
                  .labelSaveParking,
              Color(0xFFE7F8FF), 20),
          _buildParkingAndNagarSection(
              Localization
                  .of(context)
                  .labelNavigateNagar,
              Color(0xFFFFE7EB), 10),
        ],
      ),

But What I have achieved is as below :

enter image description here

You can see there is little more space between Two Boxes. I want them as equal as it is there it's left and right side.

How ? Thanks.

Upvotes: 0

Views: 1073

Answers (4)

Pratik Lakhani
Pratik Lakhani

Reputation: 333

Starting from Flutter 3.27, you can use the spacing property in the Row widget to easily add uniform spacing between its children. This eliminates the need for adding multiple SizedBox widgets manually, making your layout cleaner and more concise.

Here's an example:

Row(
  spacing: 10, // <-- Add uniform spacing between children
  children: <Widget>[
    Icon(Icons.home),
    Icon(Icons.star),
    Icon(Icons.settings),
  ],
)

Benefits of Row spacing:

  1. Concise and Clean: Reduces boilerplate code for adding spacing.
  2. Consistent: Ensures uniform spacing between all children.
  3. Lightweight: Integrated directly into the Row widget, no extra widgets required.

This is the recommended approach if you are using Flutter 3.27 or later. For earlier versions, you would need alternatives like SizedBox or Spacer.

Upvotes: 1

Renik Shiroya
Renik Shiroya

Reputation: 369

You can use below in Row

 mainAxisAlignment: MainAxisAlignment.spaceEvenly

Also, If you face any issue please check padding and margin you applied in that widgets.

Upvotes: 1

Asad
Asad

Reputation: 41

Here is the solution for your problem

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: const Text(
        'Button One',
        style: TextStyle(fontSize: 24),
      ),
    ),
    ElevatedButton(
      onPressed: () {},
      child: const Text(
        'Button Two',
        style: TextStyle(fontSize: 24),
      ),
    ),
    
  ],
)

Upvotes: 1

Kaushik Chandru
Kaushik Chandru

Reputation: 17732

_buildParkingAndNagarSectionthis method is returning an Expanded widget. So if you add 2 items in a row it will form fill up the whole space. The mainAxisAlignment will have no changes because of this. Remove the expanded widget from it and it should space evenly as expected

Upvotes: 1

Related Questions