CODEWITHSUNDEEP
flutter
Sunisha Guptan
Sunisha Guptan

Reputation: 1605

How to disable click actions for Tabs in flutter

I have 3 tabs. I wanted to disable the click actions for tabs. Have done like this now. But if I click on particular tab two times again if i click on any other tab it will go to that particular tab. I need to disable complete click action.

 onTap: (index) {
                    _tabController.index = _tabController.previousIndex;
                  },

Upvotes: 0

Views: 2906

Answers (3)

Anto Uthaya
Anto Uthaya

Reputation: 9

Another way of doing it - In some case where you need to disable a specific tab programmatically, You can set the tabcontroller.index manually with the index of the previous tab or to whatever tab.

ontap(i){

if (i > currentactivityindex && navigationRestrictedUntilPreviousIsDone){
_tabcontroller.index = currentactivityindex
}

This will make sure even if user is hopping between tabs. It will always end up in tab that is currently running.

Upvotes: 0

Sunisha Guptan
Sunisha Guptan

Reputation: 1605

Use IgnorePointer. It will disable the click action of tabs.

IgnorePointer(
                child: TabBar())

Upvotes: 2

Majid
Majid

Reputation: 2890

You need to ensure that the onTap will do nothing based on your index. for example

onTap: (int index) {
                 if(index == 1){
                   return;
                 }
                 tabController.index = index;
              },

I will give you a full example of how it should work possibly, you can see the working example here on DartPad


void main() {
  runApp(const TabBarDemo());
}

class TabBarDemo extends StatefulWidget {
  const TabBarDemo();

  @override
  _TabBarDemoState createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo> with TickerProviderStateMixin {
  late TabController tabController;
  @override
  void initState() {
    super.initState();
    tabController = TabController(
      initialIndex: 0,
      length: 3,
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              onTap: (int index) {
                 if(index == 1){
                   return;
                 }
                 tabController.index = index;
              },
              tabs: const [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: const Text('Tabs Demo'),
          ),
          body: TabBarView(
            controller: tabController,
            children: const [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }
}

Upvotes: 1

Related Questions