flutter - 如何在 flutter 中显示带有顶部和底部渐变阴影的图像？

Question

我正在处理 flutter 以显示带有顶部和底部渐变叠加的图像。
图像顶部和底部的某些部分应显示阴影，例如被灰色等其他颜色覆盖。

请找到我绘制的附图以供引用。

我已经将 Container 与 CachedNetworkImage 一起使用。并尝试使用 BoxDecoration。这没有给我预期的结果。以下代码的效果仅在图像下方应用阴影。但我想在我的图像顶部显示为叠加的顶部和底部渐变效果。

请给我建议。

代码引用:

 Container(
  height: 174.0,
  width: 116.0,
    decoration: new BoxDecoration(
    boxShadow: [
    BoxShadow(
    color: Colors.red,
    blurRadius: 20.0, // has the effect of softening the shadow
    spreadRadius: 5.0, // has the effect of extending the shadow
    offset: Offset(
    10.0, // horizontal, move right 10
    10.0, // vertical, move down 10
),
)
],),
child: CachedNetworkImage(...),

表示期望的图像:

Answer 1

作为一个选项，您可以通过更改 stops 来控制展开黑色。值(value)观

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 116.0,
            height: 174.0,
            foregroundDecoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.black, Colors.transparent, Colors.transparent, Colors.black],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0, 0.2, 0.8, 1],
              ),
            ),
            child: Image.network('https://i.picsum.photos/id/200/400/600.jpg'),
          ),
        ),
      ),
    );
  }
}