So in here i want to change some condition if my tabview switch to the second tab but i don't know how to get the tabbar index, already try this and that. Im hoping some solution without statefull, Im using GetX thanks.

im planning to change the extendBody: true, in my main page to false when the tab switch to the second tab i had the logic for that hopefully but the only problem is the index :(.

My tabs :

   List<Tab> myTabs = [
      Tab(
        text: 'Following',
      ),
      Tab(
        text: 'Trending',
      ),
      Tab(
        text: 'Search',
      ),
    ];

DefaultController code :

DefaultTabController(
      length: myTabs.length,
      child: Scaffold(
        extendBodyBehindAppBar: true,
        backgroundColor: bgColor,
        // APPBAR
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          toolbarHeight: 60,
          // BOTTOM
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(0),
            child: Align(
              alignment: Alignment.centerLeft,
              child: TabBar(
                isScrollable: true,
                labelPadding: EdgeInsets.only(left: 20),
                labelColor: Colors.white,
                labelStyle: poppins.copyWith(
                  fontSize: 15,
                  fontWeight: bold,
                ),
                unselectedLabelColor: Color(0xff585861),
                indicatorColor: Colors.white.withOpacity(0),
                indicatorSize: TabBarIndicatorSize.label,
                // TABS
                tabs: myTabs,
              ),
            ),
          ),
        ),
        body: TabBarView(
          children: [
            FollowingTab(),
            TrendingTab(),
            search(),
          ],
        ),
      ),
    );

here's the code in image :

this how the app looks like :

CodePudding user response：

Use TabBar with TabController and you can find current index while switching to next tab

@override
  void initState() {
    super.initState();
    _controller = TabController(length: 6, vsync: this);
    _controller!.addListener(() {
      print(_controller!.index);
    });
  }

your build method be like:

    @override
      Widget build(BuildContext context) {
      return Scaffold(
       bottom:TabBar(
        controller: _controller,
        tabs:[
         //your tabs will be here
        ]
       ),
       body:TabBarView(
       controller: _controller,
       children: [
         //your tabbarview will be here
        ]
       ),
     );
   }

CodePudding user response：

Here i just code of Tabbar with using Getx and Stateless Widget.

CheckOut my code and if you find solution then give up me. Thanks in advance

class TabDemo extends StatelessWidget {
  TabDemo({Key? key}) : super(key: key);

  final DemoController demoController = Get.put(DemoController());

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.flight)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_car)),
            ],
          ),
          title: const Text('Tabs Demo'),
        ),
        body: TabBarView(
          controller: demoController.controller?.value,
          children: const [
            Icon(Icons.flight, size: 350),
            Icon(Icons.directions_transit, size: 350),
            Icon(Icons.directions_car, size: 350),
          ],
        ),
      ),
    );
  }
}

You need to create controller class to define controller and initmethod

class DemoController extends GetxController with SingleGetTickerProviderMixin {
  Rx<TabController>? controller;

  @override
  void onInit() {
    // TODO: implement onInit
    controller?.value = TabController(length: 6, vsync: this);
    controller?.value.addListener(() {
      print(controller?.value.index);
    });
    super.onInit();
  }
}