'How to add gradient color in card?

How to add gradient color in the background of a card ? Should I reproduce this card with a container and a box decoration or is there another simple way ?

fluttercolorscard


Solution 1:[1]

Try below code hope it help to you in below answer change Color your need.

         Card(
            child: Container(
              height: 50,
              width: 150,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.yellow,
                    Colors.orangeAccent,
                    Colors.yellow.shade300,
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
              ),
              child: Container(), //declare your widget here
            ),
          ),

Your Card look like-> enter image description here

If you are gradient background to card or gradient border to card try below code

  Container(
        
          height: 50,
          width: 150,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.yellow,
                Colors.orangeAccent,
                Colors.yellow.shade300,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        child:Card(
          color:Colors.white,
          child: Container(), //declare your widget here
        ),
      ),

Your Screen like -> enter image description here

Solution 2:[2]

This is a sample that I tried just now. Works fine for me.

Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.black, Colors.white],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight)),
          )

Solution 3:[3]

Another way and probably the best in my opinion:

  Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.centerRight,
                    end: Alignment.center,
                    colors: [Colors.deepOrangeAccent, Colors.orange],
                  ),
                ),
                width: 300,
                height: 300,
                child: Card(
                  color: Colors.transparent,
                ),
              ),

Output:

Click here to view

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Filipe Piletti Plucenio
Solution 3 darkShader

Related Questions