How can i display & position text in my NavBar using Inkwell in flutter

I am using InkWell for my Custom Navigation Bar Icons as shown below. But i'm trying to position the text right below the Icons in the text, and looks like i'm finding it difficult to get around it.

I've tried using TextStyle but it seem not to work.

This is the desired look.

This is what i am getting

Below is my code snippet.

custom_navbar.dart

import 'dart:convert';

import 'package:afri_pro/modules/messages/controllers/chat_controller.dart';
import 'package:afri_pro/modules/messages/controllers/notification_controller.dart';

import 'package:afri_pro/theme/app_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';

import '../../models/user_model.dart';
import '../dashboard/components/floating_subscription_modal.dart';
import '../dashboard/components/subscription_notice.dart';
import '../services/controllers/services_controller.dart';
import 'controllers/home_controller.dart';

class CustomNavBarWidget extends StatelessWidget {
  final int selectedIndex;
  final onItemSelected;

  const CustomNavBarWidget({
    Key? key,
    required this.selectedIndex,
    required this.onItemSelected,
  });

  @override
  Widget build(BuildContext context) {
    HomeController homeController = Get.find();
    MessagesController messagesController = Get.find();
    NotificationsController notificationsController = Get.find();
    ServicesController servicesController = Get.find();

    var user =
        UserModel.fromJson(jsonDecode(servicesController.userData.value)).user!;

    return Material(
      child: Container(
        color: Theme.of(context).backgroundColor,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(30), topRight: Radius.circular(30)),
            color: Theme.of(context).cardColor,
          ),
          child: SizedBox(
            width: double.infinity,
            height: 60.0,
            child: Obx(() => Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    InkWell(
                      onTap: () {
                        onItemSelected(0);
                        messagesController.leaveRoom();
                      },
                      child: Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 10, vertical: 10),
                          child: Icon(
                            CupertinoIcons.house_alt,
                            color: homeController.currentTab.value == 0
                                ? AppColors.secondary
                                : const Color(0xff979797),
                          )),
                    ),
                    if (user.userType != "player" &&
                        servicesController.subscription.isNotEmpty &&
                        !servicesController.loading &&
                        user.userType != "club_official")
                      InkWell(
                        onTap: () {
                          onItemSelected(4);
                        },
                        child: Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 10, vertical: 10),
                            child: const Icon(
                              CupertinoIcons.line_horizontal_3_decrease,
                              color: Color(0xff979797),
                            )),
                      ),
                    InkWell(
                        onTap: () {
                          onItemSelected(1);
                          if (messagesController.selectedRoomId.value != 0) {
                            messagesController.socket.emit('joinRoom',
                                messagesController.selectedRoomId.value);
                          }
                        },
                        child: Stack(
                          children: [
                            if (messagesController.showBadge.value == true)
                              Positioned(
                                right: 0,
                                top: 5,
                                child: Container(
                                  width: 8,
                                  height: 8,
                                  decoration: BoxDecoration(
                                      color:
                                          homeController.currentTab.value == 1
                                              ? AppColors.secondary
                                              : const Color(0xff979797),
                                      borderRadius: BorderRadius.circular(4)),
                                ),
                              ),
                            Container(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 10),
                                child: Icon(
                                  CupertinoIcons.chat_bubble,
                                  color: homeController.currentTab.value == 1
                                      ? AppColors.secondary
                                      : const Color(0xff979797),
                                )),
                          ],
                        )),
                    InkWell(
                        onTap: () {
                          onItemSelected(3);
                        },
                        child: Stack(children: [
                          if (notificationsController.showBadge.value == true)
                            Positioned(
                              right: 6,
                              top: 6,
                              child: Container(
                                width: 8,
                                height: 8,
                                decoration: BoxDecoration(
                                    color: homeController.currentTab.value == 3
                                        ? AppColors.secondary
                                        : const Color(0xff979797),
                                    borderRadius: BorderRadius.circular(4)),
                              ),
                            ),
                          Container(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 10, vertical: 10),
                              child: Icon(
                                CupertinoIcons.bell,
                                color: homeController.currentTab.value == 3
                                    ? AppColors.secondary
                                    : const Color(0xff979797),
                              )),
                          const Text(
                            'Notif',
                          ),
                        ])),
                    InkWell(
                        onTap: () {
                          onItemSelected(2);
                          messagesController.leaveRoom();
                        },
                        child: Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 10, vertical: 10),
                            child: Icon(
                              CupertinoIcons.gear_alt,
                              color: homeController.currentTab.value == 2
                                  ? AppColors.secondary
                                  : const Color(0xff979797),
                            ))),
                  ],
                )),
          ),
        ),
      ),
    );
  }
}

persistent_bottom_tab.dart

import 'package:afri_pro/modules/messages/views/chat.dart';
import 'package:afri_pro/modules/dashboard/views/dashboard.dart';
import 'package:afri_pro/modules/messages/views/notifications.dart';
import 'package:afri_pro/modules/players/views/filter_plyaer_view.dart';
import 'package:afri_pro/modules/players/views/players.dart';
import 'package:afri_pro/modules/settings/views/settings.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';
import 'controllers/home_controller.dart';
import 'custom_navbar.dart';
import 'package:afri_pro/modules/players/controllers/players_controller.dart';
import 'package:afri_pro/routing/tab_routing.dart';

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

  @override
  State<CustomBottomTab> createState() => _CustomBottomTabState();
}

class _CustomBottomTabState extends State<CustomBottomTab> {
  var items = [
    const Dashboard(),
    const Chat(),
    const Settings(),
    const Notifications(),
  ];

  List<Widget> _buildScreens() {
    return items;
  }

  @override
  Widget build(BuildContext context) {
    HomeController homeController = Get.find();

    PlayersController playersController = Get.find();

    return PersistentTabView.custom(
      context,
      backgroundColor: Theme.of(context).cardColor,
      controller: homeController.persistentTabController,
      itemCount: items
          .length, // This is required in case of custom style! Pass the number of items for the nav bar.
      screens: _buildScreens(),
      confineInSafeArea: true,
      handleAndroidBackButtonPress: true,
      hideNavigationBarWhenKeyboardShows: true,
      customWidget: CustomNavBarWidget(
        // Your custom widget goes here
        selectedIndex: homeController.persistentTabController.index,
        onItemSelected: (index) {
          if (index == 4) {
            playersController.nextPage.value = 1;
            playersController.title.value = "All Players";
            playersController.resetFilters();
            playersController.resetPlayers();
            playersController.fetchAllPlayers();
            TabRouting().pushScreen(context, const Players());
          } else {
            homeController.persistentTabController.index = index;
            homeController.updateCurrentTab(index);
          }
        },
      ),
    );
  }
}

Appreciate in advanced & a happy weekend :)

Solution

First in your custom_navbar, change this:

child: SizedBox(
   width: double.infinity,
   height: 80.0,
   child: ...),

then in your every InkWell change this:

InkWell(
              onTap: () {
                onItemSelected(3);
              },
              child: Stack(children: [
                if (notificationsController.showBadge.value == true)
                  Positioned(
                    right: 6,
                    top: 6,
                    child: Container(
                      width: 8,
                      height: 8,
                      decoration: BoxDecoration(
                          color: homeController.currentTab.value == 3
                              ? AppColors.secondary
                              : const Color(0xff979797),
                          borderRadius: BorderRadius.circular(4)),
                    ),
                  ),
                Container(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 10, vertical: 10),
                    child: Icon(
                      CupertinoIcons.bell,
                      color: homeController.currentTab.value == 3
                          ? AppColors.secondary
                          : const Color(0xff979797),
                    )),
                Positioned(
                  left:0,
                  right: 0,
                  bottom: 0,
                  child: Text(
                    'Notif',
                  ),
                ),
              ])),