I am new to Flutter. Before this, I only using page route but then I knwo this method is wrong. I want bottom navigation bar to be output like this. https://dartpad.dartlang.org/?id=2835ca041d187ee5247821a688712e63

But I don't know on how to implement it. I hope someone can help and explain to me. And this is my code for what I have done so far.

class NavBar extends StatefulWidget {
  const NavBar({ Key? key }) : super(key: key);

  @override
  State<NavBar> createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {


  int _isSelected = 0; 

  final List <bool> _animByPages = [false, false, false, false, false];
  List <bool> modifiedPages = [];

  final List<BottomNavItem> _listBottomNavItems =  [
    BottomNavItem(title:'Home', icon:Icons.home, page: HomeScreen()),
    BottomNavItem(title:'Activity', icon:Icons.receipt, page: ParkingScreen()),
    BottomNavItem(title:'Wallet', icon:Icons.credit_card, page: HomeScreen()),
    BottomNavItem(title:'Notification', icon:Icons.notifications, page: HomeScreen()),
    BottomNavItem(title:'Settings', icon:Icons.person, page: HomeScreen()),
  ];


  @override
  Widget build(BuildContext context) {
    return Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(_listBottomNavItems.length, 
            (index) { 
              return BottomNavItem(
              page: _listBottomNavItems[index].page,
              title: _listBottomNavItems[index].title, 
              icon: _listBottomNavItems[index].icon, 
              isSelected: _isSelected == index, 
              onTap: () {  
                setState(() {   
                  _isSelected = index;
                });
              },
              );
            }
            )
           );
  }
}

class BottomNavItem extends StatelessWidget {
  final String title;
  final IconData icon;
  final bool? isSelected;
  final Function()? onTap;
  final Widget page;
  
  const BottomNavItem({required this.title,
                      required this.icon, 
                      required this.page,
                      this.isSelected, 
                      this.onTap
                      });
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
     onTap: () {
                onTap!();
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) => page,
                  ),
                );
              },
              child: Container(
                  padding: const EdgeInsets.all(5),
                  width: 50,
                  height: 40,
                  decoration: BoxDecoration(
                    color: isSelected == true ? Colors.black87: Colors.transparent,
                    borderRadius: BorderRadius.circular(10),
                  ),
      
                  child: Column(
                    children: [
                      Icon(icon, color: isSelected == true ? Colors.white: Colors.black87, size: 17),
                      const SizedBox(height: 5,),
                      Text(
                        title,
                        style: TextStyle(
                            fontSize: 7,
                            fontWeight: FontWeight.bold,
                            color: isSelected == true ? Colors.white: Colors.black87
                        ),
                      )
                    ],
                  )
              )
          );
        }
      }

CodePudding user response：

So far this the most basic bottom navigation that I can provide.

class BottomNav extends StatefulWidget {
  const BottomNav({Key? key}) : super(key: key);

  @override
  State<BottomNav> createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: index,
        children: const [
          ScreenPageOne(),
          ScreenPageTwo(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: (int newindex) {
          setState(() {
            index = newindex;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: "Account",
          ),
        ],
      ),
    );
  }
}

1. The int index = 0 is basically the value that will be the basis on which screen to display.

2. On the scaffold body I declared IndexedStack that has 2 screens, since the value of index is 0 the screen that would be displayed is ScreenPageOne().

3. On the scaffold bottomNavigationBar the onTap function is the one responsible for changing the value of index to the new index value.

CodePudding user response：

Hey rider You can use this easy to understand and use.

import 'package:flutter/material.dart';

import 'all_data_BestForYou/best_category_list.dart';
import 'bottom_tab_pages/chat_page_data/chat_page.dart';
import 'bottom_tab_pages/myprofile_page_data/myprofile_page.dart';
import 'bottom_tab_pages/saved_page_data/saved_page.dart';
import 'bottom_tab_pages/search_page_data/search_page.dart';

class Home extends StatefulWidget {
  final List<BestCaregoryList> favoriteList;

  Home(this.favoriteList);

static const routeName = '/Home';

 @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _selectedPageIndex = 0;
  List<Map<String, Object>>? _pages;

  @override
  void initState() {
  _pages = [
    {'page': HomePage()},
    {'page': SearchPage()},
    {'page': SavedPage(widget.favoriteList)},
    {'page': ChatPage()},
    {'page': MyProfilePage()},
  ];
 super.initState();
}

void _selectPage(int index) {
  setState(() {
    _selectedPageIndex = index;
  });
}

_bottomNavigationBarItem(Icon icon, Icon activeIcon, String label) {
  return BottomNavigationBarItem(
  icon: icon,
  activeIcon: activeIcon,
  label: label,
  );
}

Widget _createBottomNavigationBar() {
  return Container(
    padding: EdgeInsets.only(top: 15),
    height: 80,
    decoration: BoxDecoration(
      color: Colors.transparent,
      image: DecorationImage(
        image: AssetImage('assets/images/bottom_tab_bar.png'),
        fit: BoxFit.fill,
      ),
    ),
    child: BottomNavigationBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      selectedIconTheme: IconThemeData(color: Colors.white),
      selectedItemColor: Colors.white,
      unselectedIconTheme:
          IconThemeData(color: Color.fromRGBO(171, 178, 162, 1)),
      unselectedItemColor: Color.fromARGB(171, 178, 162, 1),
      currentIndex: _selectedPageIndex,
      type: BottomNavigationBarType.fixed,
      selectedFontSize: 11,
      unselectedFontSize: 11,
      onTap: _selectPage,
      items: [
        _bottomNavigationBarItem(
          Icon(Icons.home_outlined),
          Icon(Icons.home),
          'Home',
        ),
        _bottomNavigationBarItem(
          Icon(Icons.search),
          Icon(Icons.search),
          'Search',
        ),
        _bottomNavigationBarItem(
          Icon(Icons.favorite_border),
          Icon(Icons.favorite),
          'Saved',
        ),
        _bottomNavigationBarItem(
          Icon(Icons.chat_outlined),
          Icon(Icons.chat_rounded),
          'Chat',
        ),
        _bottomNavigationBarItem(
          Icon(Icons.person_outline_sharp),
          Icon(Icons.person),
          'My Profile',
        ),
      ],
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Theme.of(context).canvasColor,
    extendBody: true,
    bottomNavigationBar: _createBottomNavigationBar(),
    body: _pages![_selectedPageIndex]['page'] as Widget,
  );
}