Flutter Hero animation not working with SliverAppBar - flutter

Question

I'm trying to add animation to flutter SliverAppBar using Hero widget.
I'm displaying time in FlexibleSpaceBar inside SliverAppBar, and I have designed it such that when the user scrolls down, the original AppBar title widget**(Currently a Column)** is replaced with the widget present inside FlexibleSpaceBar(Also a column).
I have enclosed both the column widgets inside of Hero but the change isn't animated.
enter image description here
class _MyHomePageState extends State<MyHomePage> {
static DateTime time = DateTime.now();
static String formattedDate = DateFormat('EEE d MMM').format(time);
static String formattedTime = DateFormat.jm().format(time);
Widget appBarTitle = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(formattedDate, style: TextStyle(fontSize: 16.0),),
Text('20 Shawal 1441 AH', style: TextStyle(fontSize: 12.0),),
],
);
Widget appBarTitleCollapsed = Hero(
tag: 'time',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Dhuhr', style: TextStyle(fontSize: 12.0),),
Text(formattedTime, style: TextStyle(fontSize: 18.0),),
],
),
);
double appBarHeight = 200.0;
bool lastStatus = true;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: appBarHeight == 200 ? appBarTitle: appBarTitleCollapsed,
pinned: true,
expandedHeight: 200.0,
flexibleSpace: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints){
WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {
appBarHeight = constraints.biggest.height;
}));
return appBarHeight > 140.0 ? FlexibleSpaceBar(
centerTitle: true,
title: Container(
height: 130.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Hero(
tag: 'time',
child: Column(
children: <Widget>[
Text('Dhuhr', style: TextStyle(fontSize: 12.0),),
Text(formattedTime, style: TextStyle(fontSize: 18.0),),
],
),
),
Text('Now', style: TextStyle(fontSize: 12.0),)
],
),
),
background: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset('Assets/mosque.jpg', fit: BoxFit.cover,),
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.greenAccent.withOpacity(.6), Colors.green[900].withOpacity(.6)]
)
),
)
],
),
) : FlexibleSpaceBar(
title: Text(''),
);
},
)
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index){
return Container(child: Text('$index'),);
},
childCount: 200,
),
)
],
),
),
);
}
}