How to disable default animation for sliverAppBar?

I want to disable this shrinking padding animation in the sliverAppBar title.

flutter-sliver-app-bar-padding

The idea is to make custom menu bar right below the sliverAppBar background. Also it should be full width row and always visible. Now it is shrinking and resizing, I don’t need that.

SliverAppBar(
  expandedHeight: 200.0,
  floating: false,
  pinned: true,
  elevation: 0.0,
  flexibleSpace: SafeArea(child: // <-- SafeArea doesn't work for FlexibleSpaceBar.title in this case
    FlexibleSpaceBar(
      background: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(
            'assets/images/store.png',
            fit: BoxFit.cover,
            width: 120,
            height: 120,
          ),
        ],
      ),
      collapseMode: CollapseMode.none,
      titlePadding: EdgeInsetsDirectional.only(start: 100, bottom: 0), // <-- have to add 100 to padding to keep in safe area on the screen
      title: Row( // <-- animation enables by default if wrapped in a Row widget
        children: [
          Icon(Icons.menu, size: 40, color: Colors.white,),
        ]
      )
    )
  )
),

How to disable this shrink, size and animation in sliverAppBar for FlexibleSpaceBar title? Please help.

@BugBuster If you don’t want sliverAppBAr features then is there a particular reason why you are using it instead of the regular “AppBar”? You can add the image as title in your AppBar.

Let us know if you face any constraints to use the AppBar.

I want to hide logo in sliverAppBar as it is now but I don’t want to change title padding or size while scrolling list. That’s why I should use sliverAppBar. I believe such behaviour could be configured but how?

I’ve just solved this issue. I had to add one more sliverAppBar below the first one instead of using FlexibleSpaceBar title for this purpose. Thanks!

1 Like