How Do I Add A Blur Effect At The Right Edge Horizontal ListView To Show That There Is More Content

I would like a way for the user to see that they can scroll horizontally on my horizontal ListView Thanks in advance Edit: Here is my code @wcyankees424 Container( height: 50,

Solution 1:

You can use ShaderMask with a gradient.

You can adjust inside the LinearGradient the stops and the colors to change the effect.

Maybe change Colors.white to Colors.trasnparent

Please try this code, to see some effect.

  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")),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

These are the examples in images:

Solution 2:

Is this the effect you wanted? Try this out let me know what you think.

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