Is it possible to change the transition of routing in items of a bottomNavigationBar? my mean is when you tap any of items in bottomNavigationBar , then the body change with nice animation like custom animation. for example with:
class MyCustomRoute<T> extends MaterialPageRoute<T> {
MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
: super(builder: builder, settings: settings);
@override
Widget buildTransitions(BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
if (settings.isInitialRoute)
return child;
return new FadeTransition(opacity: animation, child: child);
}
}
try PageView:
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController();
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Nav Bar")),
body: SizedBox.expand(
child: PageView(
controller: _pageController,
onPageChanged: (index) {
setState(() => _selectedIndex = index);
},
children: <Widget>[
Container(color: Colors.blueGrey,),
Container(color: Colors.red,),
Container(color: Colors.green,),
Container(color: Colors.blue,),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
selectedItemColor: Colors.black,
onTap: _onItemTapped,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
title: Text('Item One'),
icon: Icon(Icons.home)
),
BottomNavigationBarItem(
title: Text('Item One'),
icon: Icon(Icons.apps),
backgroundColor: Colors.lightBlue,
),
BottomNavigationBarItem(
title: Text('Item One'),
icon: Icon(Icons.chat_bubble),
backgroundColor: Colors.lightBlue,
),
BottomNavigationBarItem(
title: Text('Item One'),
icon: Icon(Icons.settings),
backgroundColor: Colors.lightBlue,
),
],
),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
//
//
//using this page controller you can make beautiful animation effects
_pageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.easeOut);
});
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With