CODEWITHSUNDEEP
flutter
Mohammed Hamdan
Mohammed Hamdan

Reputation: 1355

How to provide gradient color for flutter splash screen

i am using the following plugin

flutter_native_splash 2.2.17

it is work perfectly but the problem is i only can use one color in the following setup

flutter_native_splash:
  color: "#16874c" // here i am not able to use two HEX color as list in order to get gradiant color

i have the following desire gradient

  Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [
              Colors.blue,
              Colors.black,
            ]
        )
    ),
  ),

how can i use that same gradient and provide it to flutter_native_splash setup

Upvotes: 0

Views: 1210

Answers (2)

jaimin rana
jaimin rana

Reputation: 86

If you want to use gradient colors as your background color, you need to create a new file in the drawable folder and name it gradient_background.xml.

Since the gradient background is a combination of colors, specify the custom colors you want to use as a gradient in colors.xml. The maximum number of colors you can use is three: the start color, center color, and end color.

In this file, within the shape tag, specify your gradient. In my example, that’d be a linear gradient with all of the possible three colors.

To choose your gradient color and what angle of the gradient you want, you can use the Online CSS Gradient Generator.

for more info check this article

Upvotes: 1

Ozan Taskiran
Ozan Taskiran

Reputation: 3552

From the docs:

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

Create a gradient image with any tool, put it inside your assets folder and link it as background_image

Upvotes: 2

Related Questions