Issue
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 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(
right: 0,
bottom: 0,
child: Text(
'Notif',
),
),
])),
Answered By - eamirho3ein
Answer Checked By - Marie Seifert (JavaFixing Admin)
