Linear gradient not connecting at center in container with row of widgets

Question

I’m trying to create a top bar using a Container with a horizontal LinearGradient background and a Row of widgets inside it.

However, even though I’m using Alignment.centerLeft to Alignment.centerRight, the gradient does not appear to connect exactly in the center. It looks slightly shifted towards the right.

Here is my code:

child: Container(
  height: 65.hp, // using flutter_screenutil
  decoration: const BoxDecoration(
    gradient: LinearGradient(
      colors: [
        kGradientFirstColor,
        kGradientSecondColor,
      ],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ),
  ),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: 16.wp, vertical: 10.hp),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Row(
          children: [
            Padding(
              padding: EdgeInsets.only(bottom: 4.hp),
              child: SvgPicture.asset(
                "assets/images/svg/home_hamburger_svg.svg",
                width: 24.hp,
                height: 24.hp,
              ),
            ),
            SizedBox(width: 10.wp),
            SvgPicture.asset(
              "assets/images/svg/my_prop_ai_header.svg",
              width: 111.wp,
              height: 22.wp,
            ),
          ],
        ),
        Row(
          children: [
            SvgPicture.asset(
              "assets/images/svg/heart_svg.svg",
              width: 24.wp,
              height: 24.hp,
            ),
            SizedBox(width: 20.wp),
            SvgPicture.asset(
              "assets/images/svg/bell_svg.svg",
              width: 24.wp,
              height: 24.hp,
            ),
          ],
        ),
      ],
    ),
  ),
)

AFAQ AWAN · Accepted Answer · 2025-08-08 09:42:19Z

2

You can adjust the gradient with the code below

const LinearGradient(
  colors: [Colors.blue, Colors.black, Colors.black],
  stops: [0.0, 0.5, 1.0], // Adjust stops to control the gradient spread
  begin: Alignment.centerLeft, // Start from left
  end: Alignment.centerRight, // End at right
),

answered Aug 8 at 9:42

AFAQ AWAN

1012 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mael Toukap · Accepted Answer · 2025-08-08 07:37:15Z

This is caused by the asymmetry of your Row content, which makes the gradient appear shifted. The left side of the Row contains more visual weight (larger widgets) than the right, creating an optical imbalance.

here are 2 alternatives:

1. Use a Stack to separate the background gradient from the content
By placing the gradient in a background Container and layering the Row on top, you ensure the gradient stretches evenly from left to right, independent of the widget layout.

Stack(
  children: [
    Container( // background gradient
      height: 65.hp,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [kGradientFirstColor, kGradientSecondColor],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
      ),
    ),
    Padding( // foreground content
      padding: EdgeInsets.symmetric(horizontal: 16.wp, vertical: 10.hp),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row( /* left content */ ),
          Row( /* right content */ ),
        ],
      ),
    ),
  ],
)

2. Adjust the visual balance in the Row
Within the Row, you can use Spacer or extra padding on the lighter side (the right side) to visually balance it with the heavier left side. This helps center the content more evenly over the gradient and avoids the illusion of a shifted background.

Collectives™ on Stack Overflow

Linear gradient not connecting at center in container with row of widgets

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest