How to create the multi instance of tab controller in flutter using getx?

Question

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.

Answer 1

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(),
            ),
          )
        ],
      )),
    );
  }
}