0

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.

Walrus
  • 19,801
  • 35
  • 121
  • 199

1 Answers1

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

Thiago Fontes
  • 355
  • 1
  • 9
  • It is the answer I outlined above. I was just hoping there was a simpler way. – Walrus Oct 21 '22 at 13:49
  • 1
    The only thing I can think of is to use a VisibilityDetector to check if a widget on the list is hidden, but personally I would go for the scroll value approach since it would be possible to gradually change the opacity with the scroll value. – Thiago Fontes Oct 21 '22 at 14:52