How to apply Linear gradient on box decoration in flutter?

2,792

Solution 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:

enter image description here


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,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Solution 2

do something like this for gradient and background image.

Container(
      decoration: BoxDecoration(
          image:
          DecorationImage(image: AssetImage(image), fit: BoxFit.cover)),
      child: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
              Colors.black.withOpacity(.3),
              Colors.black.withOpacity(.3),
            ]
         )
      ),
   )
)
Share:
2,792
Guest
Author by

Guest

Updated on December 27, 2022

Comments

  • Guest
    Guest over 1 year

    Below is the UI that I want to build,

    enter image description here

    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!!