CODEWITHSUNDEEP
flutterflutter-sliver
buttonsrtoys
buttonsrtoys

Reputation: 2781

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(

Upvotes: 3

Views: 16145

Answers (2)

Chijioke Okwunakwe
Chijioke Okwunakwe

Reputation: 41

SliverAppBar(
      pinned: true,
      floating: false,          
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(

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.

Upvotes: 4

Pablo Barrera
Pablo Barrera

Reputation: 10963

If you want the SliverAppBar to collapse, but the bottom remain visible, then you could do this:

To make the SliverAppBar expand / contract its content and prevent it from disappearing:

pinned: true

The app bar can still expand and contract as the user scrolls, but it will remain visible rather than being scrolled out of view. (pinned)

To make the content of the SliverAppBar appear / disappear when you scroll:

floating: true

Whether the app bar should become visible as soon as the user scrolls towards the app bar. (floating)

Then the PreferredSize of the bottom widget shouldn't be 0 but the actual height of the bottom widget.

preferredSize: const Size.fromHeight(60),

Upvotes: 1

Related Questions