bottom navigation bar transition in flutter

Question

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);
  }
}

Here is possible solution: https://stackoverflow.com/a/59133502/5228569. Just change MaterialPageRoute to PageRouteBuilder and set transitionBuilder (e.g. SlideTransition) — Alex.Marynovskyi, Jul 23 '20 at 08:50
You can check out this flutter package called animations, and watch this short clip on YouTube to see how to set it up. https://youtu.be/nY5_fW7_mqc?t=1180 — Apps 247, Jun 02 '21 at 05:54

score 45 · Accepted Answer · answered Nov 27 '19 at 17:36

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);
});
  }
}

bottom navigation bar transition in flutter

1 Answers1