CODEWITHSUNDEEP
flutterflutter-layout
Alex Wright
Alex Wright

Reputation: 627

Aligning two widgets in a row, one in the middle and the next on the right side

I want to place a text widget in the middle of the screen and an icon on the right side. My code is:

Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text('Today',
              style: TextStyle(
              color: Colors.blue,
              fontSize: 26,
              fontWeight: FontWeight.w600)),
            Icon(
              Icons.pause_circle_outline,
              color: Colors.blue,
              size: 50,
            )
          ],
        )
      ],
    )

When I use mainAxisAlignment: MainAxisAlignment.spaceAround I get the following result which is not desired.

ScreenShot

Upvotes: 1

Views: 775

Answers (4)

Avnish Nishad
Avnish Nishad

Reputation: 1862

Set mainAxisAlignment: MainAxisAlignment. spaceBetween and a container in the children. Note:- we are using container because it will occupy all the available space at the starting.

We can also user Spacer() widget but this can throw hasSize error.

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: const [
        Container(), 
        Text('Today',
          style: TextStyle(
          color: Colors.blue,
          fontSize: 26,
          fontWeight: FontWeight.w600)),
        Icon(
          Icons.pause_circle_outline,
          color: Colors.blue,
          size: 50,
        )
      ],
    )

Upvotes: 0

Ozan Taskiran
Ozan Taskiran

Reputation: 3572

You should put it inside a Stack, Align the Icon to the right and Align the title in the center. With Expanded and Center you will still lose the space for the Icon, so it's not realy in the center.

Column(
        children: [
          Stack(
            fit: StackFit.loose,
            children: [
              Align(
                alignment: Alignment.center,
                child: Text(
                  'Today',
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 26,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              Align(
                alignment: Alignment.centerRight,
                child: Icon(
                  Icons.pause_circle_outline,
                  color: Colors.blue,
                  size: 50,
                ),
              ),
            ],
          ),
        ],
      ),

Stack Centered Text + Icon on the right

Upvotes: 2

eamirho3ein
eamirho3ein

Reputation: 17940

You can try this:

Row(
      children: const [
        SizedBox(
          width: 50,
        ),
        Expanded(
          child: Center(
            child: Text(
              'Today',
              style: TextStyle(
                color: Colors.blue,
                fontSize: 26,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ),
        Icon(
          Icons.pause_circle_outline,
          color: Colors.blue,
          size: 50,
        )
      ],
    )

enter image description here

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63769

You can use MainAxisAlignment.spaceBetween, and adding another widget with same size (as last one) on 1st index to maintain spacing.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: const [
    SizedBox(
      width: 50,
    ),
    Text(
      'Today',
      style: TextStyle(
        color: Colors.blue,
        fontSize: 26,
        fontWeight: FontWeight.w600,
      ),
    ),
    Icon(
      Icons.pause_circle_outline,
      color: Colors.blue,
      size: 50,
    )
  ],
)

Upvotes: 1

Related Questions