Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a linear gradient with 45 degrees in Flutter?

Tags:

flutter

I can not understand how to operate in degrees LinearGradient. I have the following code:

Container(
        height: 100.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          gradient: LinearGradient(begin: FractionalOffset.topLeft, end: FractionalOffset.bottomRight, colors: [
            Color(0xFF148535),
            Color(0xFF148535),
            Color(0XFF0D6630),
            Color(0XFF0D6630),
            Color(0xFF148535),
            Color(0xFF148535),
          ], stops: [
            0.0,
            0.3,
            0.3,
            0.7,
            0.7,
            1.0
          ]),
        ),
      );

But .topLeft and '.bottomRight' don't do that is required. Picture that is below shows what I want to get. (The picture has a offset and it doesn't fit to [0.0, 0.3, 0.3, 0.7, 0.7, 1.0] because this is just example)

enter image description here

like image 340
dakiesse Avatar asked Nov 26 '18 19:11

dakiesse


2 Answers

This might help you determine the angle

eg :

LinearGradient(
          begin: Alignment(-1.0, -1),
          end: Alignment(-1.0, 1),

Alignment in Flutter

More Details on Gradients: How to improve your Flutter application with gradient designs by Varun Chilukuri

like image 65
Kasun Thilina Avatar answered Oct 02 '22 15:10

Kasun Thilina


Try using these values:

 LinearGradient(
          begin: Alignment(-1.0, -2.0),
          end: Alignment(1.0, 2.0),

Or event better

   LinearGradient(
          begin: Alignment(-1.0, -4.0),
          end: Alignment(1.0, 4.0),

Y: parameter description

The distance fraction in the vertical direction.
A value of -1.0 corresponds to the topmost edge. A value of 1.0
corresponds to the bottommost edge. Values are not limited to that range;
/// values less than -1.0 represent positions above the top, and values /// greater than 1.0 represent positions below the bottom.

like image 29
diegoveloper Avatar answered Oct 02 '22 15:10

diegoveloper