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

Question

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

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

Answer 1

我使用以下代码解决了我的问题。 （当这样做时，不要使用盒子阴影。它会导致一切都变暗）：

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-[{1}}本身就是其中之一。这种方法的另一个优点是我们不需要使用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来确定图像是否可显示。如果图像尚不可用，它将显示frame作为图像的占位符。