如何在右邊緣水平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

這是你想要的效果嗎？ 試試這個讓我知道你的想法。

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
                    ),
                  ),
                ),
              ),
            ),
          ),

Answer 2

您可以使用帶有漸變的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")),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

這些是圖像中的示例：