我如何将这种类型的消失阴影或晕影或底部阴影添加到颤振中的图像中

Question

我一直在尝试在颤振中实现这种消失的阴影或晕影效果，但我不能使用投影，但它不会像这样出现。

我的尝试：

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

我不希望阴影是这样的，而是我想要如下图所示的晕影效果。我有一个堆栈，我正在其中使用 boxedshadow。

Answer 1

您可以使用以下两个选项：

• 线性渐变颜色
• 盒子阴影

结果如下，图像包含超过 1k 个单词：

代码：

                        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'),
                                    ],
                                  ),
                                ),
                              ],
                            ),

我认为，线性渐变就可以了，但要小心，如果你打算在容器上方放置一些具有 LG 颜色的小部件，它们会受到影响。

所以，我建议使用 LG，但用堆栈包裹它，将按钮放在 LG 容器上，而不影响按钮的颜色。

结构：

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

希望对您有帮助。

Answer 2

这对我来说效果很好，一些调整可能会使其变得准确。 “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),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}