How do I mix multiple gradients in Flutter?

user_6032979 0
Viewed 2949

The designer has combined two or more gradients in the Figma Design they created. In some designs, they have combined a radial gradient with a linear gradient; while some other designs, they have combined a linear gradient with another linear gradient.

This is something that can easily be done with CSS, but, in Flutter, I haven't been able to implement it. I have read almost all documentation of Flutter but no solution seems to be in sight. Is there anyway I can combine two gradients without having the designer change the design?

dart flutter mobile cross-platform
5 Answers

Had to wrap container in a container to achieve this effect:

Container(
  decoration: BoxDecoration(
    gradient: gradientOne,
  ),
  child: Container(
    decoration: BoxDecoration(
      gradient: gradientTwo,
    ),
    child: content,
  ),
)

Works with semi-transparent gradients.

user_31873740

gradient: LinearGradient(

          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [Colors.blue, Colors.red])),
user_49399150

if you mix multiple gradient like this

enter image description here

so try to this way

body: Column(

      children:<Widget> [

         Container(

          decoration: BoxDecoration(

              gradient: LinearGradient(

                  begin: Alignment.topRight,

                  end: Alignment.bottomLeft,

                  colors: [Colors.blue, Colors.red])),
         
           child: Center(

               child: Text(
              '',

              style: TextStyle(

                  fontSize: 48.0,

                  fontWeight: FontWeight.bold,

                  color: Colors.white),

            ),
          ),
        ),

        Container(

          decoration: BoxDecoration(

              gradient: LinearGradient(

                  begin: Alignment.topRight,

                  end: Alignment.bottomLeft,
                  colors: [Colors.white, Colors.black])),

          child: Center(

            child: Text(

              '',
              style: TextStyle(

                  fontSize: 48.0,

                  fontWeight: FontWeight.bold,

                  color: Colors.white),

            ),
          ),
        )
      ],
       ));
user_49399150

try to use Gradient.lerp(yourFirstGradient, yourSecondGradient, 0.5) both have to be the same type

user_22352740 
gradient: LinearGradient(
    begin: Alignment.topCenter, 
    end: Alignment.bottomCenter, 
    colors: [ Color.fromARGB(255, 255, 255, 255), 
              Color.fromARGB(255, 218, 217, 217)]
 )
),

//This is what I did in a container. I wrapped my entire scafffold in a container to get the background to be a white to light grey color.

user_126053280
Related