android - 如何在水平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")),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

这些是图像中的示例: