如何在右边缘水平ListView添加模糊效果以显示还有更多内容

Question

我想要一种让用户看到他们可以在我的水平 ListView 上水平滚动的方法

提前致谢

编辑：

这是我的代码@wcyankees424

Container(
  height: 50,
  child: Stack(
    children: <Widget>[
      ListView.builder(
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemCount: cheat.buttons.length,
          itemBuilder: (context, index) {
            return ButtonListItem(cheat.buttons[index]);
          }
      ),
      Positioned(
        top: 0,
        right: 0,
        width: 50,
        height: MediaQuery.of(context).size.height,
        child: ClipRRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(
                sigmaX: 0,
                sigmaY: 99
            ),
            child: Container(
              color: Colors.black.withOpacity(0.1),
            ),
          ),
        ),
      )
    ],
  )
),

这是它现在的样子：

Answer 1

您可以使用ShaderMask渐变。

您可以在 和 内部进行调整LinearGradient来stops改变colors效果。

也许更改Colors.white为Colors.trasnparent

请尝试一下这段代码，看看有什么效果。

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ShaderMask(
          shaderCallback: (Rect bounds) {
            return LinearGradient(
              colors: [Colors.white, Colors.white.withOpacity(0.05)],
              stops: [0.7, 1],
              tileMode: TileMode.mirror,
            ).createShader(bounds);
          },
          child: Container(
            height: 100,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                Card(
                  color: Colors.red,
                  child: Center(child: Text("012345678910 - 0123")),
                ),
                Card(
                  color: Colors.yellow,
                  child: Center(child: Text("012345678910 - 0123")),
                ),
                Card(
                  color: Colors.blue,
                  child: Center(child: Text("012345678910 - 0123")),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

这些是图像中的示例：