How to achieve this linear gradient in 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