1

I've seen this question asking about how to make an app bar that can collapse/expand when clicking on a button like in the Google Calendar (cf gif bellow) app but on Android. I'm trying to do the same but with Flutter and I can't find resources to do it.

Just having an explanation on how to expand/collapse the AppBar would be sufficient.

enter image description here

geauser
  • 1,005
  • 8
  • 20

1 Answers1

0

SliverAppBar gives you an expandable appBar that behaves great with lists. But if you just want to do it like your example I would just make it with an AnimatedContainer.

bool show = false;

Scaffold(
  body: Column(
    children:[
    AnimatedContainer(
    duration: Duration(milliseconds: 300),
    child: Column(
       children:[
       Row(icon, text, actions),
       if(show)
       Calender(),
       ]),
    ),
    Expanded(child: OtherContent()),
    ],
  ),
),

_toggleCalender(){
   setState((
     show = !show;
   ));
}
AntEdote
  • 318
  • 3
  • 8
  • Thanks for the answer I will test it later, but do you have an idea of how I could accomplish my goal using an `AppBar` or `SliverAppBar`? I'd rather not reinvent the wheel... – geauser Mar 12 '22 at 22:12
  • Just search for sliverAppBar tutorial you will find a lot. – AntEdote Mar 14 '22 at 08:34
  • I did a lot of research before asking but all the tutorial I find are about the folding nature of the `SliverAppBar` when the user scroll but none mention how you could "expand/collapse" the `SliverAppBar` while still keeping its scrolling behavior... – geauser Mar 14 '22 at 11:25
  • Sorry for the slow answer you set the expandedHeight property. And change it dynamically to change the height of the app bar. – AntEdote Mar 28 '22 at 10:26