Как добавить эффект размытия на правом краю горизонтального 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, чтобы изменить эффект.

Возможно изменить * От 1009 * до 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")),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

Это примеры на изображениях: