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

Design a card with linear gradient in a triangular shape in flutter

I have a card which contains an image of the prodcut and product details above the image i.e in the Stack.

Product Card

Problem is with the gradient design which is like a triangular shape i.e

Linear Gradient Required

I have tried using Linear Gradient inside Box Decoration of a container widget like this :

Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: 141,
                width: double.maxFinite,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(10),
                    bottomRight: Radius.circular(10),
                  ),
                  gradient: LinearGradient(
                    begin: Alignment.bottomLeft,
                    end: Alignment.topRight,
                    colors: [Colors.black, Color(0x00000000)],
                  ),
                ),
                child: Container(
                  // Data inside Column
                ),
              ),
            ),

but did’t work.

Tags:

2

Answers


  1. 0

    You should add where the gradient starts and ends, which you did, but you forgot the parameter stops: [0.7, 1] give whatever numbers you want from 0 to 1.

    If that does not work, try changing colors to this colors: [Colors.black, Colors.transparent]. Hope this helps

    Login or Signup to reply.
  2. 0

    you can add more color transparent and add custom Alignment

    example :

    Container(
                height: 300,
                width: 300,
                decoration:  BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                  gradient:const LinearGradient(
                    begin:Alignment(-0.1, 1),
                    end: Alignment.topRight,
                    colors: [Colors.yellow, Colors.transparent,Colors.transparent,Colors.transparent,],
                  ),
                ),
            )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search