Home > Enterprise >  how to create vertical linear gradient in flutter?
how to create vertical linear gradient in flutter?

Time:02-02

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)),
         ),
    ),

CodePudding user response:

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],
),

CodePudding user response:

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],
              ),
  • Related