SingleChildScrollView with controller does not scroll first time

Question

I have a requirement where when user scroll a page up, app bar title should show. And when it is scrolled to the minimum title should hide. This is because page content also have the title.

I have implemented SingleChildScrollView with a controller to do this.

void initState() {
    _controller = ScrollController();
    _controller.addListener(_scrollListener);
    super.initState();
  }

  _scrollListener() {
    if (_controller.offset <= _controller.position.minScrollExtent &&
        !_controller.position.outOfRange) {
      setState(() {
        _reachedTop = true;
      });
    } else {
      setState(() {
        _reachedTop = false;
      });
    }
  }

  _buildContent(BuildContext context) {
    
    return SafeArea(
        child: SingleChildScrollView(
      controller: _controller,
      child: widget.content,
    ));
  }

The _reachedTop variable is used to toggle title in appbar bar.

When i try to scroll up for the first time it does not scroll at all, but show the title of the appbar. the variable _reachedTop get set to false i assume.

Then when i try to scroll 2nd time it allow me to scroll.

I assume this is cause by setState I am using to set the variable.

How do I work around this? Is there another way of doing this?

Answer 1

use slivers here is the flutter doc link https://flutter.dev/docs/development/ui/advanced/slivers to know more about slivers