How to apply Linear gradient on box decoration in flutter?

Question

Below is the UI that I want to build,

Currently, I have used linear gradient to achieve this. But the issue is the linear gradient disappears when I use image in the Box Decoration.

Below is the code,

    child: Container(
                      padding: EdgeInsets.all(10.0),
                      height: 180,
                      child: Container(
                        padding: EdgeInsets.all(10.0),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(20)),
                          boxShadow: [
                            BoxShadow(
                              color: ColorSet.primaryGrey,
                              blurRadius: 5,
                              offset: Offset(0, 7),
                            ),
                          ],
                          gradient: LinearGradient(
                            colors: [ColorSet.primaryRed, Colors.transparent, Colors.transparent, ColorSet.primaryRed],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            stops: [0, 0, 0.6, 1],
                          ),

//On uncommenting the below three lines, I do not see the linear gradient
                          // image: DecorationImage(
                          //   image: AssetImage("lib/assets/images/event.jpg"),
                          //   fit: BoxFit.cover,
                          // ),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Container(
                              //place this container to right side
                              constraints: BoxConstraints(maxWidth: 60.0),
                              padding: EdgeInsets.all(5),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8.0),
                                  color: Colors.white.withOpacity(0.8)),
                              child: Row(
                                children: [
                                  Icon(
                                    CustomIcons.test,
                                    color: ColorSet.primaryRed,
                                  ),
                                  Text(
                                    flames.toString(),
                                    style: TextStyles.captionStyle.copyWith(
                                        color: ColorSet.primaryRed,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 17.0),
                                  ),
                                ],
                              ),
                            ),
    
                            //display event name, start/end dates times and duration in a column
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('${name}',
                                    style: TextStyles.titleStyle.copyWith(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 20.0)),
                                SizedBox(
                                  height: 3.0,
                                ),
                              
                              ],
                            ),
    
                          ],
                        ),
                      ),
                    ),

Basically I need linear gradient to be displayed on the image. As mentioned in the above code (In comments), if I remove the image in Box Decoration, the linear gradient works perfectly fine. But on adding the image back, the linear gradient is missing. I guess the linear gradient is not applying on the image.

Kindly help!!

Answer 1

A solution would be to Stack your current Container (with the LinearGradient and the Container child) on top of another Container defining the BoxShadow and the DecorationImage:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Scan with Time',
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      width: 240,
      height: 480,
      child: Stack(
        children: [
          Positioned.fill(
            child: Container(
              padding: EdgeInsets.all(10.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.blueGrey,
                    blurRadius: 5,
                    offset: Offset(0, 7),
                  ),
                ],
                image: DecorationImage(
                  image: NetworkImage(
                      'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg/1280px-Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Positioned.fill(
            child: Container(
              padding: EdgeInsets.all(10.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                gradient: LinearGradient(
                  colors: [
                    Colors.red,
                    Colors.transparent,
                    Colors.transparent,
                    Colors.red
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  stops: [0, 0, 0.6, 1],
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(
                    //place this container to right side
                    constraints: BoxConstraints(maxWidth: 240.0),
                    padding: EdgeInsets.all(5),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8.0),
                        color: Colors.white.withOpacity(0.8)),
                    child: Row(
                      children: [
                        Icon(
                          Icons.directions_bike,
                          color: Colors.red,
                        ),
                        Text(
                          '5',
                          style: TextStyle(
                            color: Colors.red,
                            fontWeight: FontWeight.bold,
                            fontSize: 17.0,
                          ),
                        ),
                      ],
                    ),
                  ),

                  //display event name, start/end dates times and duration in a column
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('NAME',
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 20.0)),
                      SizedBox(
                        height: 3.0,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}