How to make page transition when use bottomNavigationBar in flutter-CodePudding

I use a basic bottomNavigationBar and now it shows just page without any transition,i want to use page transition when tap different bottomNavigationBars item.

CodePudding user response：

Use IndexedStack Widget

int _currentIndex = 0;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: IndexedStack(
          index: _currentIndex,
          children: const [
            HomePage(),
            SettingsPage(),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) => setState(() => _currentIndex = index),
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }

CodePudding user response：

use PageView or TabView Check this article

CodePudding user response：

 List pages = [
    HomeScreen(),
    DiscoverScreen(),
    Container(),
    MessageScreen(),
    ProfileScreen(),
  ];

Scaffold(
      body: pages.elementAt(current!),
 bottomNavigationBar: BottomNavigationBar(
          currentIndex: widget.current!,
          unselectedItemColor: Colors.black,
          selectedItemColor: Colors.green,
          showSelectedLabels: true,
          showUnselectedLabels: true,
          onTap: (val) {
            setState(() {
              current = val;
            });