CODEWITHSUNDEEP
flutterlistviewoverscroll
Gvarph
Gvarph

Reputation: 41

Different color of Overscroll indicator in flutter?

Is it possible to have a different color for the top and bottom Overscroll indicator of a ListView?

I have the background of the ListView a color gradient and want it the top Overscroll indicator to match the top of the gradient and the bottom indicator to match the bottom of the gradient.

Upvotes: 2

Views: 2482

Answers (2)

Kalpesh Khandla
Kalpesh Khandla

Reputation: 746

1. Wrap your ListView inside a GlowingOverscrollIndicator

2. Wrap your GlowingOverscrollIndicator inside a ScrollConfiguration with a new scroll behavior

Try with below code snippet.

 ScrollConfiguration(
        behavior: ScrollBehavior(),
        child: GlowingOverscrollIndicator(
          axisDirection: AxisDirection.down,
          color: Colors.yellow,
          child: ListView.builder(
            physics: ClampingScrollPhysics(),
            itemCount: 15,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text("testing :$index"),
              );
            },
          ),
        ),
      ),

Upvotes: 0

Mobina
Mobina

Reputation: 7119

You can wrap the ListView with a GlowingOverscrollIndicator and set its color parameter. For changing the color for the top and bottom, you can add a listener to the scroll controller of the ListView.

 var _color = Colors.blue;

  _listener() {
    if (_scrollController.offset >=
            _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      // bottom
      setState(() {
        _color = Colors.red;
      });
    }
    if (_scrollController.offset <=
            _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      // top
      setState(() {
        _color = Colors.blue;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_listener);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GlowingOverscrollIndicator(
        axisDirection: AxisDirection.down,
        color: _color,
        child: ListView.builder(
          controller: _scrollController,
          physics: ClampingScrollPhysics(),
          itemCount: 30,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('$index'),
            );
          },
        ),
    ));
  }

Result:

res

Upvotes: 2

Related Questions