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

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

2

Answers


  1. 0

    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],
),
    Login or Signup to reply.
  2. 0

    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],
              ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search