Question 177403 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Aligning Text with Container/Icon in Row

My Issue: Aligning Text with Container / Icon in Row

Current Output: (I want to align this blue line with text horizontally center)
I want to align this line with text horizontally center

Expected Output: (Red horizontal line for a guideline)
Expected Output

My current code:

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text(
      'Unit Details',
      style: textTheme.bodyLarge,
    ),
    kHorizontalSpaceS,
    Container(
      height: 4,
      width: 42,
      decoration: BoxDecoration(
        color: Pallete.brandColor,
        borderRadius: BorderRadius.circular(16),
      ),
    ),
  ],
),

I have less knowledge about Text baseline, but I tried with CrossAxisAlignment.baseline but it’s not working.

How can I horizontally align this blue Container with the text?

I faced a similar issue with aligning Icon and Text in Row.

Tags:

2

Answers


  1. 0

    Can you wrap your code with Container and give needful height.

           Container(
        height: 20,
        alignment: Alignment.centerLeft,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [],
        ),
    Login or Signup to reply.
  2. 0

    I think you should use mainAxisAlignment since it is a row.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search