Flutter - How to animate NavigationRail page transition [windows] - windows

Question

I have implemented the NavigationRail as such:
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
HomePageState createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
int _selectedIndex = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
NavigationRail(
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home), label: Text("Home")),
NavigationRailDestination(
icon: Icon(Icons.settings), label: Text("Settings"))
],
selectedIndex: _selectedIndex,
),
Expanded(child: pageBuilder())
],
),
);
}
Widget pageBuilder() {
switch (_selectedIndex) {
case 0:
return const _HomePage();
case 1:
return const _SettingsPage();
default:
return const _HomePage();
}
}
}
With _HomePage :
class _HomePage extends StatefulWidget {
const _HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<_HomePage> {
#override
Widget build(BuildContext context) {
return Container(child: Text("HomePage"));
}
And SettingsPage is the same but says "SettingsPage" instead.
The question is, how can I animate the transition between these pages?
I cannot use Route and call Navigator.of(context).push(_pageRouter()) under the switch statement as it will throw errors about building or such (it's a long one which I can provide if needed).
Is there any way to achieve this without using Route? or some workaround?

Answer 1

There are multiple animation type. You can use switcher to change between animation
here is the link for widget. it will automatically change widget by animation.
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
transitionBuilder: (Widget child, Animation<double> animation) {
return ScaleTransition(scale: animation, child: child);
},
child: pageBuilder(),
)