如何在 Flutter 中为自定义 AppBar 设置动画？答案

【问题标题】：How to animate custom AppBar in Flutter?如何在 Flutter 中为自定义 AppBar 设置动画？
【发布时间】：2019-07-30 15:28:13
【问题描述】：

我对flutter还没有太多经验，很好奇如何实现自定义的可以动画的AppBar。

我只想对 AppBar 应用一个简单的动画，它只会改变 AppBar 的高度。据我了解，AppBar 必须是 PreferredSizeWidget 并且我想对其进行动画处理以更改高度，我阅读了几篇文章，但大部分都使用 SilverAppBar。

谢谢。

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);
}

【问题讨论】：

标签： dart flutter flutter-animation

【解决方案1】：

我已经想出了如何实现我想要的。所以我返回了 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)
                    ]
                  ),
                )
              ),
            ],
          )
        );
        })
      ),
    );
  }
}

在脚手架上我有一个动作，当按下按钮时它会改变高度，它必须在 setState() 上

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

【讨论】：