make sliverAppBar hide title in expended mode

Question

I'm testing code with SliverAppBar and make this widget , but there is an issue I want hide top bar that has "2 icons and title "categories Page " when SliverAppbar is expended but when I scrolling up it must show and flexibleSpace hide

this is my code

 return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 200,
        floating: false,
        pinned: true,
        snap: false,
        title: AppBar(),
        centerTitle: true,

        flexibleSpace: FlexibleSpaceBar(
          background: CenterAppBar(),
          // centerTitle: false,
          // titlePadding: EdgeInsets.all(0),
          // background: AppBar(),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate([
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
                        CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
                        CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
        ]),
      )
    ],
  ),
);

You can create your own FlexibleSpaceBar https://stackoverflow.com/a/63407889/5541523 — Kherel, Aug 14 '20 at 07:10

score 2 · Answer 1 · answered Jan 17 '22 at 17:06

You can utilize the SliverAppBar's bottom property for the widget that you'd like to overlap with the title. See this sample.

Scaffold(
  body: CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      automaticallyImplyLeading: false,
      expandedHeight: 80,
      floating: false,
      pinned: true,
      snap: false,
      centerTitle: true,
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(0),
        child: Container(
          color: Colors.redAccent,
          child: const Padding(
            padding: EdgeInsets.all(16.0),
            child: Center(
            child: Text('Categories'),
          ),
        ),
      ),
    ),
    flexibleSpace: FlexibleSpaceBar(
      background: Container(
        height: 80,
        color: Colors.redAccent,
        child: const Center(
          child:  Text(
            'Categories Page',
            style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 20),
           ),
         ),
       ),
       // centerTitle: false,
       // titlePadding: EdgeInsets.all(0),
       // background: AppBar(),
    ),
  ),
  SliverList(
    delegate: SliverChildListDelegate([...]),
  ),
),

make sliverAppBar hide title in expended mode

1 Answers1