如何在水平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.grey,  Colors.white],
              stops: [0.7, 1],
              tileMode: TileMode.mirror,
            ).createShader(bounds);
          },
          child: Container(
            height: 100,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                Card(
                  color: Colors.grey,
                  child: Center(child: Text("012345678910 - 0123")),
                ),
                Card(
                  color: Colors.grey,
                  child: Center(child: Text("012345678910 - 0123")),
                ),
                Card(
                  color: Colors.grey,
                  child: Center(child: Text("012345678910 - 0123")),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

这些是图像中的示例：
首先带Colors.white
第二Colors.white60

Answer 2

这是您想要的效果吗？试试看，让我知道您的想法。

Positioned(
            top: 0,
            right: 0,
            width: 50,
            height: MediaQuery.of(context).size.height,
            child: ClipRRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 2.5, sigmaY: 2.5), //this determines the blur in the x and y directions best to keep to relitivly low numbers
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Colors.black.withOpacity(0),
                        Colors.black.withOpacity(
                            0.3), //This controls the darkness of the bar
                      ],
                      // stops: [0, 1], if you want to adjust the gradiet this is where you would do it
                    ),
                  ),
                ),
              ),
            ),
          ),