how to implement animation textField on two pages in Flutter - flutter

Question

How do I implement this kind of animation textField? and also this should be on two pages. (same as a gif). When user click back button/system back button should be back to the previous page.
I got from Facebook app, please check

Answer 1

I found my own answer, I used Hero and PageRouteBuilder
If anyone know a better way, please let me know
class TextScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Hero(
tag: 'text',
transitionOnUserGestures: true,
child: Material(
type: MaterialType.transparency,
child: IconButton(
onPressed: () {
Navigator.of(context).push(
PageRouteBuilder(
transitionDuration: Duration(milliseconds: 500),
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return NewPage();
},
transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
return Align(
child: FadeTransition(
opacity: animation,
child: child,
),
);
},
),
);
},
icon: Icon(
Icons.search,
color: Colors.white,
)),
),
),
],
),
);
}
}
class NewPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Hero(
tag: 'text',
child: Container(
height: 50,
decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.all(Radius.circular(30))),
child: Material(type: MaterialType.transparency, child: TextField()),
)),
),
);
}
}