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

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,
            ),
          ],
        ),
      ],
    ),
  ),
)

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.