在颤动中使图像的边缘变暗？答案

【问题标题】：Darken edges of an Image in flutter?在颤动中使图像的边缘变暗？
【发布时间】：2018-11-05 16:04:26
【问题描述】：

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

我已经检查了 Image 类，但我看到的只有 color 和 colorBlendMode，我确定这不是最简单的方法.

【问题讨论】：

【解决方案1】：

接受的答案对我来说很好用。但在我的情况下，图像是通过网络加载的，因此即使尚未显示图像，也可以看到暗边，这对我来说是错误的。所以我有另一种方法是使用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(),
            );
          }
        },
      ),

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

【讨论】：

【解决方案2】：

我使用以下代码解决了我的问题。（这样做时，不要使用 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,),
    ),
  ],
),

【讨论】：

查看gradient.dart文件，你应该使用Alignment。我在你的回答中编辑了它。