Expandable AppBar (onPressed)

2.6k views Asked by At

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

Collapsed AppBar

Expanded AppBar

1

There are 1 answers

5
Constantin N. On BEST ANSWER

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) ,)
      ),)