Flutter SVG Icons Get Pixelated in Bottom bar in Flutter

Question

I am getting issue with Svg Icon in bottom bar for ios, I had tried a lot of solution but didn't get solution for same, for android it's work fine.

I had tried all the solutions below:

1. Wrap with Center and Container & With All fit property too like Fill, Cover, Contain, ScaleDown, etc...

Center(
  child: Container(
    height: 30.h,
    width: 30.w,
    color: Colors.transparent,
    child: SvgPicture.asset(
        height: 30.h,
        width: 30.w,
        fit: BoxFit.scaleDown),
  ),
)

2. Wrap With Opacity with 0.99

Opacity(
  opacity: 0.99,
  child: SvgPicture.asset(
      currentIndex == indices[index]
          ? inactiveAssets[index]
          : activeAssets[index],
      height: 30.h,
      width: 30.w,),
)

Please let me know if anyone have proper solution

Tried

1. Wrap with Center and Container & With All fit property too like Fill, Cover, Contain, ScaleDown, etc...

Center(
  child: Container(
    height: 30.h,
    width: 30.w,
    color: Colors.transparent,
    child: SvgPicture.asset(
        height: 30.h,
        width: 30.w,
        fit: BoxFit.scaleDown),
  ),
)

2. Wrap With Opacity with 0.99

Opacity(
  opacity: 0.99,
  child: SvgPicture.asset(
      currentIndex == indices[index]
          ? inactiveAssets[index]
          : activeAssets[index],
      height: 30.h,
      width: 30.w,),
)

Current Output:

Expected Output: