Currently I was working on flutter using getx,
Is there any ways to create multi-instance of Tab Controller in it.
I am expecting to create multi-instance of Tab controller.
CodePudding user response:
U can use this method to use multi-instance-tab using same TabController using Getx:
tab.controller.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class TabsController extends GetxController
with GetSingleTickerProviderStateMixin {
late List<Tab> tabs;
late TabController controller;
TabsController(List<dynamic> tabLabel) {
tabs = tabLabel
.map((dynamic e) => Tab(
icon: e['icon'] != null ? e['icon'] : null,
text: e['label'],
))
.toList();
}
@override
void onInit() {
super.onInit();
controller = TabController(vsync: this, length: tabs.length);
}
@override
void onClose() {
controller.dispose();
super.onClose();
}
}
home.page.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:app/assets/icons.dart';
import 'package:app/pages/page1.page.dart';
import 'package:app/pages/page2.page.dart';
import 'package:app/pages/page3.page.dart';
import 'package:app/pages/component1.page.dart';
import 'package:app/pages/component2.page.dart';
import 'package:app/pages/component3.page.dart';
import 'package:app/controllers/tabs.controller.dart';
const tabs = [
{'label': 'Page1', 'icon': Icon(CustomIcons.favicon), 'tab': Page1()},
{'label': 'Page2', 'icon': Icon(CustomIcons.favicon), 'tab': Page2()},
{'label': 'Page3', 'icon': Icon(CustomIcons.favicon), 'tab': Page3()}
];
const subTabs = [
{
'label': 'Component1',
'icon': Icon(CustomIcons.favicon),
'tab': Component1()
},
{
'label': 'Component2',
'icon': Icon(CustomIcons.favicon),
'tab': Component2()
},
{
'label': 'Component3',
'icon': Icon(CustomIcons.favicon),
'tab': Component3()
}
];
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
TabsWidget createState() {
return TabsWidget();
}
}
class TabsWidget extends State<HomePage> {
@override
Widget build(BuildContext context) {
final TabsController tabController =
Get.put(TabsController(tabs), tag: 'main-tab-bar');
final TabsController subTabController =
Get.put(TabsController(tabs), tag: 'sub-tab-bar');
return Scaffold(
appBar: AppBar(
flexibleSpace: TabBar(
isScrollable: true,
controller: subTabController.controller,
tabs: subTabController.tabs,
labelColor: Colors.black,
labelStyle: AppTheme.textTheme.headline6,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.black,
),
),
bottomNavigationBar: BottomAppBar(
child: TabBar(
controller: tabController.controller,
tabs: tabController.tabs,
labelColor: Colors.red,
labelStyle: TextStyle(fontSize: 11),
unselectedLabelColor: Colors.black,
unselectedLabelStyle: TextStyle(fontSize: 11),
indicatorWeight: 0.1,
),
),
body: SafeArea(
child: Column(
children: [
Expanded(
child: TabBarView(
controller: tabController.controller,
children: tabs.map((e) => e['tab'] as Widget).toList(),
),
)
Expanded(
child: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: subTabController.controller,
children: subTabs.map((e) => e['tab'] as Widget).toList(),
),
)
],
)),
);
}
}