使图像的边缘变暗？

Question

如何在 flutter 中为图像的边缘添加阴影，以便白色覆盖的文本可读？我希望它看起来就像在联系人应用程序中一样：

我已经检查了图像 class，但我只看到 color 和 colorBlendMode，这将这是最简单的方法，我敢肯定。

Answer 1

我使用以下代码解决了我的问题。（做这个的时候，不要用box-shadow，会导致全黑）：

Stack(
  children: <Widget>[
    Image(
      fit: BoxFit.cover,
      image: AssetImage("assets/test.jpg"),
      height: MediaQuery.of(context).size.width * 0.8,
      width: MediaQuery.of(context).size.width,
    ),
    Container(
      height: MediaQuery.of(context).size.width * 0.8,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            const Color(0xCC000000),
            const Color(0x00000000),
            const Color(0x00000000),
            const Color(0xCC000000),
          ],
        ),
      ),
    ),
    new Padding(
      padding: const EdgeInsets.all(16.0),
      child: Text("TXT", style: Theme.of(context).primaryTextTheme.title,),
    ),
  ],
),

Answer 2

接受的答案对我来说工作正常。但在我的例子中，图像是通过网络加载的，所以即使图像还没有显示，暗边也是可见的，这对我来说是错误的。所以我有另一种方法，使用 frameBuilder - 这是 Image 的属性本身之一。这种方法的另一个优点是我们不需要使用 Stack:

Image.network(
        "https://foo.com/bar.jpg",
        width: double.infinity,
        height: expandedHeight,
        fit: BoxFit.fitWidth,
        frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
          if (wasSynchronouslyLoaded || frame != null) {
            return Container(
              child:child,
              foregroundDecoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        const Color(0xCC000000),
                        const Color(0x00000000),
                        const Color(0x00000000),
                        const Color(0xCC000000),                ]
                  )
              ),
              height: expandedHeight,
              width: double.infinity,
            );
          } else {
            return Container(
              child: CircularProgressIndicator(
                  value: null,
                  backgroundColor: Colors.white),
              alignment: Alignment(0, 0),
              constraints: BoxConstraints.expand(),
            );
          }
        },
      ),

通过使用这段代码，我能够延迟暗边缘的显示，直到显示图像。如果 wasSynchronouslyLoaded 是 true 那么这意味着图像可以立即加载，如果它是 false 那么我们必须依靠 frame 来判断图像是否可以显示。如果图像不可用，那么它将显示 CircularProgressIndicator 作为图像的占位符。

使图像的边缘变暗？

Darken edges of an Image in flutter?

flutter

shadow

color-blending