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 :)
CodePudding user response：
My question is if you really need stack. You could always use Material widget as a replacement for a Container. Below Material use Column and in said column create icon & text.
What I see here is stack always keeps items at top 0 & left 0. Stack always keeps widget at the bottom of its children list at the top. When you have your icon positioned it gets moved down a bit and then text is kept at the top of the stack positioned at coordinates 0.
You can easily avoid that using widget tree like: Material->Inkwell->Column->your widgets like so:
Material(
color: Colors.black,
child: SizedBox(
height: 60,
width: 40,
child: InkWell(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.question_mark, color: Colors.white,),
Text('name', style: TextStyle(color: Colors.white),)
],
),
),
),
)
Pasting this anywhere as a widget will give you clickable black box with inkwell with your icon and text sorted properly.
CodePudding user response：
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',
),
),
])),