How to animate custom AppBar in Flutter? - dart

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