How to animate custom AppBar in Flutter?

Question

I don't have much experience in flutter yet, and I curious of how can I achieved custom AppBar that can be animated.

I just want to apply a simple animation to the AppBar which will only change the height of the AppBar. As I understand that the AppBar must be a PreferredSizeWidget and I want to animate it to change the height, there are couple articles that I read but mostly it uses SilverAppBar.

Thanks.

class CustomAppBarRounded extends StatelessWidget implements PreferredSizeWidget{
  final String _appBarTitle;

  CustomAppBarRounded(this._appBarTitle);

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new LayoutBuilder(builder: (context, constraint) {
        final width = constraint.maxWidth * 8;
        return new ClipRect(
          child: Stack(
            children: <Widget>[
              new OverflowBox(
                maxHeight: double.infinity,
                maxWidth: double.infinity,
                child: new SizedBox(
                  width: width,
                  height: width,
                  child: new Padding(
                    padding: new EdgeInsets.only(
                      bottom: width / 2 - preferredSize.height / 3
                      ),
                    child: new DecoratedBox(
                      decoration: new BoxDecoration(
                        color: Colors.indigo,
                        shape: BoxShape.circle,
                        boxShadow: [
                          new BoxShadow(color: Colors.black54, blurRadius: 10.0)
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              new Center(
                child: new Text("${this._appBarTitle}",
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    shadows: [
                      Shadow(color: Colors.black54, blurRadius: 10.0)
                    ]
                  ),
                )
              ),
            ],
          )
        );
      }),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(100.0);
}

Answer 1

I've figured out how to achieve what I wanted. So I returned the PreferredSizeWidget

class CustomRoundedAppBar extends StatelessWidget{
  double height = 100;
  final String title;

  CustomRoundedAppBar(
    this.height,
    this.title);

  @override
  Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: Size(this.height, this.height),
      child: AnimatedContainer(
        duration: Duration(seconds: 1),
        height: this.height,
        child: new LayoutBuilder(builder: (context, constraint){
          final width =constraint.maxWidth * 8;
          return new ClipRect(
          child: Stack(
            children: <Widget>[
              new OverflowBox(
                maxHeight: double.infinity,
                maxWidth: double.infinity,
                child: new SizedBox(
                  width: width,
                  height: width,
                  child: new Padding(
                    padding: new EdgeInsets.only(
                      bottom: width / 2 - this.height / 3
                      ),
                    child: new DecoratedBox(
                      decoration: new BoxDecoration(
                        color: Colors.indigo,
                        shape: BoxShape.circle,
                        boxShadow: [
                          new BoxShadow(color: Colors.black54, blurRadius: 10.0)
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              new Center(
                child: new Text("${this.title}",
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    shadows: [
                      Shadow(color: Colors.black54, blurRadius: 10.0)
                    ]
                  ),
                )
              ),
            ],
          )
        );
        })
      ),
    );
  }
}

And on the Scaffold I have an action when button is pressed it will change the height, which must be on the setState()

    onPressed: (){
              setState(() {
                this.height = 200;
                this. _appBarTitle = "TEST";
              });
            },