How to remove scroll glow?

by

In Flutter, almost every scrolling widget contains the end scroll Glow Effect. This quick article will tell you how to remove scroll glow in a listview or other scrolling widgets.

Here is the image mentioned below shows the Glow Effect, It shows when we reach the end of the screen and at the beginning when the user scroll extends.

sometimes we don’t need this Glow for example if the ListView is Used to make the Navigation sidebar. So the use case Depends upon the UI requirements.

By Default, flutter adds custom ScrollBehaviour in Scrollable Widgets. So instead of that we can add our own Scroll Behavior to Our listing widgets.

There are a number of ways to achieve this but the most useful is given Below.

How to remove scroll glow?

  • Create a class with parent ScrollBehavior
  • Add the buildViewportChrome function to the class
  • Insert Some properties Given Below in Code
  • Use ScrollConfiguration() widget as a parent of ListView
  • Pass behavior class to the property behavior of ScrollConfiguration()
  • Full Code Below

Let’s begin with Code Example

Create a class that extends ScrollBehavior

class MyScrollGlow extends ScrollBehavior {
     
}

Now, add the method buildViewportChrome with the following properties.

class MyScrollGlow extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
      BuildContext context, 
      Widget child, 
      AxisDirection axisDirection
    ) {
    return child;
  }
}

Add the ScrollConfiguration Widget to the parent of the ListView Widget. ScrollConfiguration has behavior: property with which we pass our MyScrollGlow Class.

ScrollConfiguration(
  behavior: MyScrollGlow(),
  child: ListView(
    ...
  ),
)

Also, it can be done on the APP level if we want to remove the glow effect from the entire app, here is the code for this

MaterialApp(
  builder: (context, child) {
    return ScrollConfiguration(
      behavior: MyScrollGlow(),
      child: child,
    );
  },
  home: new MyHomePage(),
);

Other Solutions

There are some other methods too for achieving this.

Using GlowingOverscrollIndicator

Rap the ListView Component to GlowingOverscrollIndicator and Add some Properties to that widget

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GlowingOverscrollIndicator(
      showLeading: false,
      showTrailing: false,
      axisDirection: AxisDirection.down,
      color: Colors.transparent,
      child: ListView.builder(
        itemCount: 50,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

Using BouncingScrollPhysics

In this just add the BouncingScrollPhysics() to the physics: properties of the ListView Widget.

ListView.builder(
      physics: BouncingScrollPhysics(),
      itemCount: 10,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text('Item $index'));
      },
    );

So here are some ways to remove the glow effect to the listing widgets in Flutter.

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com

Leave a Comment