CODEWITHSUNDEEP
flutterflutter-layout
Florin Laudat
Florin Laudat

Reputation: 129

Is there any possibility to align to the screen center the second element of a Row

I have a Row with three elements. I want to have the second element right in the middle of the space occupied by the row and not depending on the first element of the row. I've tried like this but seems that the _buildLogo widget is center align between the end of first element and the starting point of the third element.

 child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            _buildCancelButton(),
            _buildLogo(),
            _buildExtraText(),
          ],
        ),

I've also tried with a Stack/Row combination but then I have problems with the vertical alignment.

child: Stack(
    children: [
      _buildLogo(),
      Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            _buildCancelButton(),
            _buildExtraText(),
          ],
        ),
      ),
    ],

I will attach a picture with my result. enter image description here

Adding Spacer() between the _buildLogo() will lead with the same result.

 _buildCancelButton(),
 Spacer(),
 _buildLogo(),
 Spacer(),
  _buildExtraText(),

enter image description here

Upvotes: 0

Views: 331

Answers (3)

Satheesh Guduri
Satheesh Guduri

Reputation: 363

If Left and right widget are same size then the middle widget will be in center. So make it equal, use sizedbox.

Upvotes: 0

Faiizii Awan
Faiizii Awan

Reputation: 1710

Use Spacer(). It will align your 2nd widget in center.

child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        _buildCancelButton(),
         Spacer(), //add it here
        _buildLogo(),
         Spacer(), // add it here
        _buildExtraText(),
      ],
    ),

Note: the buildLogo's horizontal alignment will depend on first and third widget's width

Upvotes: 0

Curious99
Curious99

Reputation: 398

I think your logo actually is in the middle, but it kind a looks a little bit off, because of the icon on the left side. Maybe a 'dumb' beginner-solution is adding some sapces after the 'AirDolomiti'-text (like this: 'AirDolomiti ').

Did this help or did I missunderstand your question?

Upvotes: 2

Related Questions