Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – how to style lable of bottomNavigationBar to gradient color when active?

enter image description here

NavigationBarTheme(
          data: NavigationBarThemeData(
            indicatorColor: Colors.transparent,
            labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
            labelTextStyle: WidgetStateProperty.all(
              const TextStyle(
                  color: AppColors.secondary,
                  fontFamily: 'Pretendard',
                  fontSize: 10,
                  fontWeight: FontWeight.w500),
            ),
          ),
          child: Container(
            decoration: const BoxDecoration(
              border:
                  Border(top: BorderSide(color: Color(0x33FDD0FF), width: 1)),
              gradient: AppColors.backgroundGradientBottomTab,
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(24),
              ),
            ),
            child: NavigationBar(
              elevation: 0,
              backgroundColor: Colors.transparent,
              selectedIndex: selectedIndex,
              destinations: [
                NavigationDestination(
                  label: 'HOME',
                  icon: SvgPicture.asset(
                    selectedIndex == 0 ? AppSvgs.homeActive : AppSvgs.home,
                  ),
                ),
                NavigationDestination(
                  label: 'EVENT',
                  icon: SvgPicture.asset(
                    selectedIndex == 1 ? AppSvgs.eventActive : AppSvgs.event,
                  ),
                ),
                NavigationDestination(
                  label: 'COMMUNITY',
                  icon: SvgPicture.asset(
                    selectedIndex == 2
                        ? AppSvgs.communityActive
                        : AppSvgs.community,
                  ),
                ),
                NavigationDestination(
                  label: 'PROFILE',
                  icon: SvgPicture.asset(
                    selectedIndex == 3
                        ? AppSvgs.profileActive
                        : AppSvgs.profile,
                  ),
                ),
              ],
              onDestinationSelected: (int index) {
                log("index:$index");
                onDestinationSelected(context, index);
              },
            ),
          )),
    );
Tags:

2

Answers


  1. 0
    1. Instead of using the default BottomNavigationBar, you can create your own version using BottomAppBar and Row.
    2. Apply a gradient using ShaderMask for the text of the active label.

    For better solution please check this link
    code here

    Login or Signup to reply.
  2. 0

    If you use BottomNavigationBar and BottomNavigationBarItem like this. It works automatically.

          bottomNavigationBar: BottomNavigationBar(
    currentIndex: currentIndex,
    onTap: (index) {
      /// Switching the PageView tabs
      controller.jumpToPage(index);
      WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {
            currentIndex = index;
          }));
    },
    items: [
      BottomNavigationBarItem(
        label: '',
        icon: Tooltip(
            message: AppLocalizations.of(context)!.list,
            child: const Icon(Icons.list)),
      ),
      BottomNavigationBarItem(
        label: '',
        icon: Tooltip(
            message: AppLocalizations.of(context)!.tiles,
            child: const Icon(Icons.grid_4x4)),
      ),
      BottomNavigationBarItem(
        label: '',
        icon: Tooltip(
            message: AppLocalizations.of(context)!.datagrid,
            child: const Icon(Icons.dataset)),
      )
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search