Skip to main content

BottomTabs

C2CBottomTabs is a Flutter widget that allows you to create a bottom navigation bar with various customization options.

It is merged from 2 widgets: BottomNavigationBar và BottomNavigationBarItem

Example​

import 'package:c2c_core/c2c_core.dart';
import 'package:flutter/material.dart';

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  int _selectedIndex = 0;

  void _onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('C2CBottomTab')),
        bottomNavigationBar: C2CBottomTabs(
          tabs: [
            C2CBottomTabItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            C2CBottomTabItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            C2CBottomTabItem(
              icon: Icon(Icons.favorite),
              label: 'Favorites',
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: _onTabTapped,
        ),
        body: Container(),
      ),
    );
  }
}

void main() => runApp(const ExampleApp());

C2CBottomTabs Properties​

tabs​

A list of C2CBottomTabItem objects that define each tab in the bottom navigation bar.

Type
List of C2CBottomTabItem

currentIndex​

The index of the currently selected tab.

Type
int

onTap​

A callback function that is invoked when a tab is tapped.

Type
void Function(int)?

backgroundColor​

The color of the bottom navigation bar itself.

Type
Color?

selectedItemColor​

The color of the selected tab's icon and label.

Type
Color?

unselectedItemColor​

The color of the unselected tabs' icons and labels.

Type
Color?

selectedIconColor​

The color of the icon in the currently selected tab. If not provided, it defaults to selectedItemColor.

Type
Color?

unselectedIconColor​

The color of the icon in the currently unselected tabs.

Type
Color?

iconSize​

The size of all the tab icons.

Type
double?

elevation​

The z-coordinate of the bottom navigation bar. If not provided, it defaults to 8.0.

Type
double?

selectedLabelStyle​

The text style of the labels for selected tabs.

Type
TextStyle?

unselectedLabelStyle​

The text style of the labels for unselected tabs.

Type
TextStyle?

showUnselectedLabels​

Whether labels are shown for unselected tabs.

Type
bool?

showSelectedLabels​

Whether labels are shown for the selected tab.

Type
bool?

badgeBackgroundColor​

The background color for all badges.

Type
Color?

badgeTextStyle​

The text style for badge.

Type
TextStyle?

badgeBorderSide​

The border side for badge.

Type
BorderSide?

isShowIndicator​

Whether to show an indicator above the selected tab.

Type
bool?

indicatorWidth​

The width of the indicator.

Type
double?

indicatorHeight​

The height of the indicator.

Type
double?

indicatorColor​

The color of the indicator.

Type
Color?

indicatorDuration​

The duration for the indicator animation.

Type
Duration?

indicatorBorderRadius​

The border radius of the indicator.

Type
BorderRadius?

type​

Defines the layout and behavior of the bottom navigation bar. It defaults to BottomNavigationBarType.fixed.

Type
BottomNavigationBarType?

landscapeLayout​

Refines the layout of a BottomNavigationBar when the enclosing MediaQueryData.orientation is Orientation.landscape.

Type
BottomNavigationBarLandscapeLayout?

C2CBottomTabItem Properties​

label​

The label text for the tab.

Type
String

icon​

The widget representing the tab's icon.

Type
Widget

activeIcon​

An optional widget representing the tab's active (selected) icon.

Type
Widget?

tooltip​

The tooltip text to display when the user long-presses the tab.

Type
String?

state​

The state of the tab (basic | dot | num)

Type
BottomTabItemState

count​

The count to display as a badge on the tab. Badge will be displayed if count > 0 and state != BottomTabItemState.basic

Type
int

dotSize​

The size of the dot in the badge indicator. Available when state is BottomTabItemState.dot

Type
double

maxCount​

The maximum count to display in the badge. If the count exceeds this value, it will be displayed as ${maxCount}+. Default is 99

Type
int

badgePadding​

The padding around the content of the badge indicator.

Type
EdgeInsets?

badgeBackgroundColor​

The background color of the badge.

Type
Color?

badgeOffset​

The offset of the badge indicator from its default position.

Type
Offset?

badgeAlignment​

The alignment of the badge indicator within the tab.

Type
AlignmentGeometry

backgroundColor​

The background color of the tab. Available when type of bottom tab is BottomNavigationBarType.shifting

Type
Color?