Tab Navigation

Default NavBar Widgets

---

BottomNavigationBar

BottomNavigationBar widget is a material design widget used to display a navigation bar at the bottom of the screen. It allows users to switch between different main views of an app with a single tap. Typically, apps that use a BottomNavigationBar will have between three and five primary views or destinations.

• items: A list of BottomNavigationBarItem widgets which represent each tab in the navigation bar. Each item has an icon and a title.

• currentIndex: An integer that represents the currently selected tab's index. By changing this property and rebuilding the widget, you can change the active tab.

• onTap: A callback function that receives the index of the tapped tab. You can use this to change the currentIndex and react to tab changes.

• type: Determines the layout and behavior of a bottom navigation bar. It can be BottomNavigationBarType.fixed or BottomNavigationBarType.shifting. The former displays tabs of equal size, whereas the latter allows for larger icons and titles for the active tab.

• fixedColor, selectedItemColor, and unselectedItemColor: These properties allow you to customize the appearance of the tabs.

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _currentIndex,
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Search',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    ],
    onTap: (index) {
      setState(() {
        _currentIndex = index;
      });
    },
  ),

 

NavigationBar

NavigationBar widget is a 'material 3' specification widget that offers new and updated designs for creating navigations on the bottom appbar. The choice of design depends on preference.

bottomNavigationBar: NavigationBar(
  labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
  selectedIndex: _selectedIndex,
  onDestinationSelected: _onTap,
  destinations: const [
    NavigationDestination(
      icon: FaIcon(
        FontAwesomeIcons.house,
        color: Colors.white,
      ),
      label: 'Home',
    ),
    NavigationDestination(
      icon: FaIcon(
        FontAwesomeIcons.magnifyingGlass,
        color: Colors.white,
      ),
      label: 'Search',
    ),
  ],
),

 

CupertinoTabBar

CupertinoTabBar widget in Flutter is part of the Cupertino (iOS-style) widgets library. It provides a bottom tab bar that is typical in iOS apps. This tab bar can be used in conjunction with CupertinoTabScaffold to provide the full iOS-style tab navigation.

home: CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: [
      BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), label: 'Home'),
      BottomNavigationBarItem(icon: Icon(CupertinoIcons.book), label: 'Book'),
      // Add more items as needed
    ],
    onTap: (index) {
      // Handle tab selection if needed
    },
  ),
  tabBuilder: (context, index) {
    return CupertinoTabView(
      builder: (context) {
        switch (index) {
          case 0:
            return CupertinoPageScaffold(child: Center(child: Text('Home Tab')));
          case 1:
            return CupertinoPageScaffold(child: Center(child: Text('Book Tab')));
          default:
            return CupertinoPageScaffold(child: Center(child: Text('Default Tab')));
        }
      },
    );
  },
),

---

 

Stack

---

Stack widget is used to overlay several children widgets on top of each other. The widgets can be positioned with respect to the edges of the stack. It's similar to absolute positioning in web design.

The first child in the Stack list is the bottommost widget, and subsequent children are overlaid on top of previous ones.

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Text("I'm on top!"),
    ),
  ],
)

 

Offstage

Offstage widget is a handy widget that can be used to hide its child from the visual tree, but it will still be built and kept in memory. This can be useful in various scenarios where you want to quickly show/hide a widget without having to rebuild it or maintain its state.

The primary property of the Offstage widget is offstage, which determines if the child is visible (offstage: false) or hidden (offstage: true). When set to true, the widget and its subtree will not be painted, and they won't occupy any space in the parent widget.

Offstage(
  offstage: true, // Set this to false to show the container.
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

 

Positioned

Positioned widget is a special widget designed specifically for use within a Stack widget. It allows you to position its child relative to the edges of the Stack.

The Positioned widget has properties like top, right, bottom, and left that allow you to specify the exact location of its child within the stack. By specifying one or more of these properties, you can control where and how the child should be displayed within the Stack.

Stack(
  children: <Widget>[
    // ... other children here ...
    Positioned(
      top: 20,
      right: 15,
      child: YourWidget(),
    ),
  ],
)

---