How to hide title in Flutter SliverAppBar on scroll

I have a CustomScrollView with slivers that’s working, but am not finding a way to fully hide the top portion of the SliverAppBar (i.e., on scroll, I want to hide the image and title, but show the bottom portion):

EDIT: As shown in the images, I want to keep the bottom of the SliverAppBar on scrolling. Setting “pinned: false” hides both on scroll, so won’t work for me.

expanded
collapsed

Even before I added the padding, I wanted my title to hide on collapse, like this:

enter image description here

now that it’s truncating, I’d really like to hide it.

I’ve seen posts where you can hide the title in a NestedScrollView (e.g., the above gif), but I’d like to keep my CustomScrollView if possible?

Here’s my code:

class QuestionsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final questionsMgr = Provider.of<Questions>(context);
    final List<Question> questions = questionsMgr.questions;

    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(0),
            child: ChangeNotifierProvider.value(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    ScoreText(),
                    InstructionsText(),
                  ],
                ),
              ),
            ),
          ),
          backgroundColor: questionsMgr.getScoreColor(),
          floating: false,
          expandedHeight: 225,
          pinned: true,
          title: Text(
            "Checklist",
            textAlign: TextAlign.center,
          ),
          forceElevated: true,
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            background: Image.asset(
              "assets/images/PalFM_blue.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverList(
SliverAppBar(
      pinned: true,
      floating: false,          
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(            
    

Solution

Set the bottom property of the SliverAppBar to PreferredSize widget. Set the preferredSize property of this bottom widget to 0 (Size.fromHeight(0)), so that the sliver app bar’s height will become the height for the app bar when the sliver is collapsed.

Leave a Reply