I am trying to implement shared_axis_transition on my flutter application's bottom navigation. The setup consists of A root page with bottom navigation bar and 4 other pages which changes according to the index of bottom navigation. The problem is, each of the widgets are stateful and have their own initstate. When I try to apply animation, after animation completes, the widget rebuilds itself and sort of flickering effect is seen. How do I solve the issue? My code pattern is as follow:
RootWidget{
body: PageTransitionSwitcher(
duration: const Duration(milliseconds: 300),
transitionBuilder: (
Widget child,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return SharedAxisTransition(
child: child,
animation: animation,
secondaryAnimation: secondaryAnimation,
transitionType: _transitionType,
);
},
child: [First(),Second(),Third(),Fourth()].elementAt[index],
),
),
bottomNavigationBar(),
}
Each of the widget have their own initstate which I believe is causing this. p.s For the first time since I started flutter, animations in debug environment looks smoother than animation in release...