Flutter Detect whether there is content behind AppBar whilst scrolling

Question

Is there an easy way to detect when there is content behind a fixed container that is floating on top of a ScrollView.

In native iOS apps, the background of the TabBar and NavigationBar are only visible when there is actually content behind them. So the NavigationBar will fade in it's background as the user scrolls down.

Whilst this can be calculated to provide the scroll position of when to add opacity to the NavigationBar Background, it is much more complicated with any form of bottom bar as it would have to know the total length of the scroll window as well as calculate the bounce scroll offset at the top.

As much as all this can be calculated in theory, is there an easy way. A way of detecting when there is content behind another element.

Answer 1

You will need to pass a ScrollController to your scroll view and then listen to the scroll value and change the state of the appbar.

Example:

scrollController.addListener(() {
  //Check offset value
  if(scrollController.offset > 10) {
    //Change transparency here
    setState(() {
      ...
    });
  }
});

Adapting this to your use case it should work