How do I add color gradient to Card in flutter

Question

I want to add color gradient to a card in Flutter, tried several ways with Container and decoration but can't get the entire code to work as it should.

This is the current working code, I want to replace line 3 with a gradient:

   return new Card(
      elevation: 5.0,
      color: color.orangeAccent, //I want to replace this color with a gradient
      child: Padding(
          padding: new EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
                InkWell(
                onTap: () {},
                child: Container(
                    child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[],
                    ),
                ),
                ),
            ]
          )
      ),
   );

I played around with the advice given in this post here but cannot integrate it with my code properly.

refer my answer [here](https://stackoverflow.com/a/68856967/13997210) hope its helpful to you. — Ravindra S. Patil, Nov 22 '21 at 05:36

score 1 · Accepted Answer · answered Nov 22 '21 at 03:32

Wrap your column with Container and use decoration with gradient color

             Card(
              elevation: 5.0,
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: [
                        Colors.green,
                        Colors.blue,
                      ],
                      begin: const FractionalOffset(0.0, 0.0),
                      end: const FractionalOffset(1.0, 0.0),
                      stops: [0.0, 1.0],
                      tileMode: TileMode.clamp),
                ),
                child: Padding(
                    padding: new EdgeInsets.all(15.0),
                    child: Column(children: <Widget>[
                      InkWell(
                        onTap: () {},
                        child: Container(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[Text("Test")],
                          ),
                        ),
                      ),
                    ])),
              ),
            ),

Thanks man! Exactly what I needed! – BradG Nov 22 '21 at 18:25 — BradG, Nov 22 '21 at 18:25

How do I add color gradient to Card in flutter

1 Answers1