CODEWITHSUNDEEP
flutterdartlinear-gradients
swastij
swastij

Reputation: 159

how to create vertical linear gradient in flutter?

I am trying to create a vertical lineargradient i.e from top-center to bottom-center like this image.

I have come up with this code which creates diagonal gradient from top-left to bottom-right. How can I get a vertical linear-gradient instead?

 Container(
      height: 550,
      width: 550,
      decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment(0.9, 0.1),
                      colors: [opFireOrange, fireOrange]
                     ),
                    borderRadius: BorderRadius.all(Radius.circular(6.0)),
         ),
    ),

Upvotes: 1

Views: 4158

Answers (3)

Prateek Jain
Prateek Jain

Reputation: 614

You should set the end property to Alignment.bottomCenter and stops of same value since the transition between colors is not smooth, it is hard. This will produce the desired vertical gradient as shown in the image provided by you.

LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  stops: [0.9, 0.9], // <-- same value stops
  colors: [opFireOrange, fireOrange],
),

Explanation for same stop values -

  • For 0 to 90% of the space first color will be there
  • For 90% to 90% of the space, blend of first color and second color will be there. That means blend will not be visible. This is the key here
  • And for rest 90% to 100% of space, second color will be visible.

Defining the same stops value is responsible for hard edge between transition of colors in the gradient.

Upvotes: 0

novol
novol

Reputation: 852

add stops and set correct Alignment like

gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.orange, Colors.deepOrange],
                stops: [0.8, 1.0],
              ),

Upvotes: 0

mechaadi
mechaadi

Reputation: 958

You should change the end: Alignment(0.9, 0.1) to end: Alignment.bottomCenter and add the stops List to LinearGradient, the code below should produce the desired vertical linear gradient in flutter:

LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: [0.9, 0.1],
          colors: [opFireOrange, fireOrange],
),

Upvotes: 6

Related Questions