Question 76808 in Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search