I am facing an issue regarding the TabBar in flutter,I have used this TabBar as bottomNavigationBar property in my code.
The purpose of using a TabBar is that I have top indicator so to achieve that I have used it as bottomNavigationBar property.
Please help me resolve this looked for many solutions but not resolved :
class Home extends StatelessWidget {
HomeTabController homeTabController = Get.put(HomeTabController());
Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.appBarColor,
body: const SafeArea(
child: CommonAppBar(),
),
bottomNavigationBar: createTabBar(context),
);
}
Widget createTabBar(BuildContext context) {
return Container(
height: DesignConstants.tabHeight,
width: Get.width,
child: TabBar(
indicator: TopIndicator(),
controller: homeTabController.tabController,
labelPadding: EdgeInsets.all(0),
tabs: homeTabController.tabs,
),
);
}
}
Controller Class
class HomeTabController extends GetxController with GetSingleTickerProviderStateMixin{
late TabController tabController;
final List<Tab> tabs = <Tab>[];
var tabpos = 0.obs;
@override
void onInit() {
super.onInit();
getTabs();
tabController = TabController(length: tabs.length, vsync: this);
}
void getTabs() {
tabs.clear();
tabs.add(createTab('Home',"${ImagePaths.bottomMenuPath}/home_icon.svg",0));
tabs.add(createTab('Matches',"${ImagePaths.bottomMenuPath}/home_icon.svg", 1));
}
Tab createTab(String text,String imagePath,int index) {
return Tab(
child: Obx(() => Center(
child: Column(
children: [
SvgPicture.asset(
imagePath,
height: DesignConstants.bottomMenuIconSize,
width: DesignConstants.bottomMenuIconSize,
),
TextLanCommon(text.toUpperCase(),
style: (tabpos.value == index)
? getnotificatontabselected()
: getnotificationtabunselected()),
],
),
)));
}
@override
void onClose() {
tabController.dispose();
super.onClose();
}
}
Top Indicator Class
class TopIndicator extends Decoration {
@override
BoxPainter createBoxPainter([VoidCallback? onChanged]) {
return _TopIndicatorBox();
}
}
class _TopIndicatorBox extends BoxPainter {
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
Paint _paint = Paint()
..color = AppColors.indicatorColor
..strokeWidth = 3
..isAntiAlias = true;
canvas.drawLine(offset, Offset(cfg.size!.width + offset.dx, 0), _paint);
}
}
I tried using theme and background colours but issue with the TabBar itself what I did wrong.Please help me resolve this




