How do I add a blur effect at the right edge horizontal ListView to show that there is more content

Question

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

And here is a picture of how it looks now:

encubos · Answer 1 · 2020-04-12T03:05:47.977

7

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:

edited Apr 12 '20 at 03:05

answered Apr 11 '20 at 01:38

encubos

2,915
10
19

@encuboz I want the white part to be grey which I changed but the grey part I don't want at all (it covers the data). How do I do this? – Think_Twice Apr 11 '20 at 15:39
Mmmmm, you have to adjust some color parameters to adjust your UI to this. If you can add your listview code and an image, so I can have your "real UI" and work from there. – encubos Apr 11 '20 at 17:53
See my updated answer, now more independent from the colors of the list items. I change the colors array. Try it. – encubos Apr 12 '20 at 02:48
That's exactly what I was looking for! Thanks – ricardogobbo May 09 '21 at 05:32
How do I do this on both right and left sides? – Leonardo Rignanese Dec 04 '21 at 10:16
Anyone found out how to do this for both and only the left side? @LeonardoRignanese – Jan Feb 19 '22 at 09:22

wcyankees424 · Accepted Answer · 2020-04-12T02:11:10.023

3

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

edited Apr 12 '20 at 02:11

answered Apr 11 '20 at 01:37

wcyankees424

2,554
2
12
24

This works but its a rectangle that does have a starting gradient/blur – Think_Twice Apr 11 '20 at 14:05
When I change the blur values, it blurs the whole screen. Why is that? – Think_Twice Apr 11 '20 at 14:08
sorry I think this will solve the blurring the whole screen issue I added ```ClipRRect``` to above answer – wcyankees424 Apr 11 '20 at 17:18
I edited my question to show you my current code and how it looks. If you could please help – Think_Twice Apr 11 '20 at 20:49
sorry I didn't mean to have that value at 99 last time i was playing around and never changed it back this should give you a more desirable effect – wcyankees424 Apr 11 '20 at 21:22
So that fixed that. How do i make it fade in from the left? Instead of it just being a block? – Think_Twice Apr 11 '20 at 21:47
Okay here try this sorry it took so long to get here – wcyankees424 Apr 12 '20 at 02:11

How do I add a blur effect at the right edge horizontal ListView to show that there is more content

2 Answers2

Linked