How can i add this type of vanishing shadow or vignette or bottom shadow to image in flutter

hemanth_101
March 6, 2024
200 views
0 votes
2 Answers

I have been trying to implement this vanishing shadow or vignette effect in flutter but i cant i have used the drop shadow but it wont come like this.

My try :

BoxDecoration(
       gradient:LinearGradient(colors: [Colors.black26, Colors.black])),

I dont want the shadow to be like this instead i want the vignette effect like the below picture. I have a stack on which i am using the boxedshadow.

Answers

Chosen as BEST ANSWER

This worked somehow fine for me, some adjustments might turn it to be the exact. part of 'home_imports.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    PageController imagePageController = PageController();
    List<String> images = [
      AppAssets.couple,
      AppAssets.detective,
      AppAssets.futureGirl,
      AppAssets.ghost,
      AppAssets.lastman,
    ];

    return Scaffold(
      backgroundColor: AppColors.primaryColor,
      body: ListView(
        children: [
          Stack(
            children: [
              ShaderMask(
                shaderCallback: (rect) {
                  return LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.black,
                      // Colors.black,
                      // Colors.black,
                      // Colors.transparent,
                      Colors.transparent
                    ],
                  ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
                },
                blendMode: BlendMode.dstIn,
                child: CarouselSlider(
                  items: images.map((imagePath) {
                    return Image(
                      image: AssetImage(imagePath),
                      fit: BoxFit.cover,
                    );
                  }).toList(),
                  options: CarouselOptions(
                    viewportFraction: 1,
                    autoPlay: true,
                    height: 250.h,
                    autoPlayInterval: const Duration(seconds: 3),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

(Edit)

Here are two options you can use:

Linear Gradient Color
Box Shadow

here’s the result, image holds more than 1k words:

code:

                        Row(
                              children: [
                                Expanded(
                                  child: Column(
                                    children: [
                                      Container(
                                        height: 250,
                                        decoration: BoxDecoration(
                                          image: DecorationImage(
                                            image: AssetImage('images/3.png'),
                                          ),
                                        ),
                                      ),
                                      SizedBox(
                                        height: 10,
                                      ),
                                      Text('Normal Pic'),
                                    ],
                                  ),
                                ),
                                Expanded(
                                  child: Column(
                                    children: [
                                      Container(
                                        height: 250,
                                        decoration: BoxDecoration(
                                          image: DecorationImage(
                                            image: AssetImage('images/3.png'),
                                          ),
                                          gradient: LinearGradient(
                                            colors: [
                                              Colors.black,
                                              Colors.black54,
                                              Colors.black12,
                                            ],
                                            begin: Alignment.bottomCenter,
                                            end: Alignment.center,
                                          ),
                                        ),
                                      ),
                                      SizedBox(
                                        height: 10,
                                      ),
                                      Text('Linear Gradient'),
                                    ],
                                  ),
                                ),
                                Expanded(
                                  child: Column(
                                    children: [
                                      Container(
                                        height: 250,
                                        decoration: BoxDecoration(
                                          image: DecorationImage(
                                            image: AssetImage('images/3.png'),
                                          ),
                                          boxShadow: [
                                            BoxShadow(
                                                // spreadRadius: -12.0,
                                                blurRadius: 12.0,
                                                color: Colors.black54,
                                                offset: Offset(0, 175))
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 10,
                                      ),
                                      Text('Box Shadow'),
                                    ],
                                  ),
                                ),
                              ],
                            ),

i think, linear gradient would be ok, but take care if you are intended to put some widgets above the container that have LG color, they will be affected.

so, i recommend the usage of LG but wrap it with stack to put buttons over the LG Container without affecting button’s color.

structure:

Stack->
   Container(LG)
   Row(White Buttons) // they will not be affected by the color of the container

Hope it helps you.

Please signup or login to give your own answer.

Click here to cancel reply.