How to add gradient to container and image in flutter

I am trying to replicate the design below in my flutter application but stuck at the point of adding the background color and the tiny diamonds with transparent backgrounds.
My code so far uses a plain background with a font color that does not match.

I have tried to give the container a linear background color but it does not unfortunately look like the design above.
Also I have tried to draw some diamonds with the canvas.drawPath() but can't figure out how to arrange it to make it look like what is in the image.

Here is my code below (cc is Colors.blueGrey):

Container(
decoration: BoxDecoration(
border: Border.all(
width: 0.1,
color: i % 2 == 0 ? Colors.transparent : Colors.black,
),
boxShadow: const [
BoxShadow(
spreadRadius: 0.1,
color: Colors.blueGrey,
blurRadius: 0.5,
offset: Offset(0, 0),
),
],
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
color: i % 2 == 0 ? Colors.white : Colors.blueGrey,
// color: i % 2 == 0 ? Colors.white : const Color.fromARGB(255, 2, 48, 71).lighten(3),
),
child: Padding(
padding: const EdgeInsets.all(14),
child: Column(
children: [
Row(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
const Image(
image: AssetImage('./assets/svg/diamond.png'),
height: 30,
width: 30,
),
const SizedBox(width: 20),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Diamond Premium',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: cc,
),
),
Container(
decoration: BoxDecoration(
color: Colors.green[800],
border: Border.all(
color: Colors.greenAccent.shade100.withAlpha(50),
width: 0.5,
),
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
),
margin: const EdgeInsets.only(top: 2),
padding: const EdgeInsets.fromLTRB(5, 2, 5, 2),
child: Text(
'Current',
style: TextStyle(
color: cc,
),
),
),
],
),
],
),
const SizedBox(
height: 30,
),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.money_rounded,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Cost',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$40,000.00',
style: TextStyle(color: cc, fontSize: 14, fontWeight: FontWeight.w900),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
child: DottedLine(
dashColor: cc,
lineThickness: 0.4,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.lock_clock,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Duration',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'40 days',
style: TextStyle(color: cc, fontSize: 14, fontWeight: FontWeight.w900),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
child: DottedLine(
dashColor: cc,
lineThickness: 0.4,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
child: DottedLine(
dashColor: cc,
lineThickness: 0.4,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.forward,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Cash Out',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$40.00 - \$100.00',
style: TextStyle(color: cc, fontSize: 14, fontWeight: FontWeight.w900),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
child: DottedLine(
dashColor: cc,
lineThickness: 0.4,
),
),
const SizedBox(
height: 5,
),
Container(
padding: const EdgeInsets.all(10),
color: Colors.blue.withOpacity(0.1),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.select_all_sharp,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Watch',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$0.005',
style: TextStyle(
color: cc,
fontSize: 14,
fontWeight: FontWeight.w900,
),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.select_all_sharp,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Share',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$0.1',
style: TextStyle(
color: cc,
fontSize: 14,
fontWeight: FontWeight.w900,
),
),
],
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.select_all_sharp,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Click',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$0.0005',
style: TextStyle(
color: cc,
fontSize: 14,
fontWeight: FontWeight.w900,
),
),
],
),
],
),
),
const SizedBox(
height: 10,
),
// button goes here
// okay
SizedBox(
width: double.infinity,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
foregroundColor: Colors.green,
),
onPressed: () => false,
child: const Text('Upgrade'),),
),
],
),
],
),
),
),

The easier way is to use a ready-made svg for the background rather than redesign.

https://www.vectorstock.com/royalty-free-vector/abstract-gradient-triangle-background-vector-15671257

For example, if you directly use an svgye as a background, as in the link I left below, you will get a faster result. You can also produce your own svg files. You can get faster results with these methods.