How to achieve this linear gradient in flutter? - flutter

Question

I want to create this color gradient in flutter.
The corresponding css which achieves this is background: linear-gradient(180deg, rgba(1, 79, 134, 0.4) 0%, #014F86 100%)
I have tried everything from setting stops in LinearGradient to setting transform as transform: GradientRotation(pi), to set the radiant to 180 degree as stated in the corresponding css. I also tried setting the points manually in x and y axis using Alignment in begin and end parameters. Nothing seems to work though. Added a sample to show everything I tried so far. Not the exact code I tried but tried playing around commenting out various parts but no luck so far.
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
Color(0XFF014F86),
Color(0XFF014F86),
// Color(0XFF5575a3),
// Color(0XFF8b9ec1),
// Color(0XFFbfc9e0),
// Color(0XFFf3f6ff),
],
transform: GradientRotation(pi),
stops: [0.4, 1],
),
I also have the corresponding android native vector that achieves the same.
<!-- Rectangle 6 -->
<View
android:id="#+id/rectangle_6"
android:layout_width="311dp"
android:layout_height="37dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="32dp"
android:layout_alignParentTop="true"
android:layout_marginTop="257dp"
android:background="#drawable/rectangle_6"
android:elevation="18dp"
/>
<!-- drawable/rectangle_6.xml -->
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="311dp"
android:height="37dp"
android:viewportWidth="311"
android:viewportHeight="37"
>
<group>
<clip-path
android:pathData="M8 0H303C307.418 0 311 3.58172 311 8V29C311 33.4183 307.418 37 303 37H8C3.58172 37 0 33.4183 0 29V8C0 3.58172 3.58172 0 8 0Z"
/>
<group
android:translateX="1.029"
android:translateY="0"
android:pivotX="155.5"
android:pivotY="18.5"
android:scaleX="2.106"
android:scaleY="2"
android:rotation="90"
>
<path
android:pathData="M0 0V37H311V0"
>
<aapt:attr name="android:fillColor">
<gradient
android:type="linear"
android:startX="77.75"
android:startY="18.5"
android:endX="233.25"
android:endY="18.5"
>
<item
android:color="#66014F86"
android:offset="0"
/>
<item
android:color="#014F86"
android:offset="1"
/>
</gradient>
</aapt:attr>
</path>
</group>
</group>
</vector>
Any help on how to achieve this using BoxDecoration and LinearGradient in a Flutter Container would be greatly appreciated!

Answer 1

LinearGradient(
colors: [Color(0xff0373c4), Color(0xff014f86)],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
)
You can use this online tool to generate it :
online tool