Expandable AppBar (onPressed)

Question

How do I achieve this effect? I wanted to expand my AppBar after clicking on the dates.

Say

You can use SliverAppBar to achieve this. – Green

Does SliverAppBar allow you to disable the scroll? Because I do not want to expand/collapse the AppBar with scrolling. – Chivalry

In this case use the bottom property of AppBar. When it is closed you replace the widget with empty container then when it is open place your widget there – Hebdomadal

@ConstantinN. you can open/close the "bottom" property as you wish? – Chivalry

Ofcourse. See my answer below – Hebdomadal

@AyanDas SliverAppBar does not allow you to expand/collapse itself on button click. It reacts to scroll only. – Demosthenes

Answer 1

The simplest way is to bring toggle a veriable then change the height of the bottom widget.

Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [IconButton(icon: Icon(Icons.place),onPressed: (){
          setState((){
            isOpen = !isOpen;
          });
        })],
        bottom: PreferredSize(child: isOpen? Container(color:Colors.red, height: 100):Container(),preferredSize:Size.fromHeight(isOpen? 100:0) ,)
      ),)

Hebdomadal

Ok, at first sight it seems like this will work. Just one last question: can you animate those changes? For example the opening/closing of the "bottom" property. (I am new to Flutter, please bear with me :D) – Chivalry

Yes you can. But it is a bit complicated if you're not familiar with Animations. If you're familiar with it you only have to 100*animation.value for the height – Hebdomadal

I was still testing if this will do, there you go :) – Chivalry

@ConstantinN. This works good But I want to change the action's Icon respectively when isOpen =true? How to achieve this ? – Righthander

IconButton(icon: isOpen?Icons.pause:Icons.play) – Hebdomadal