Home > Mobile >  How to disable click actions for Tabs in flutter
How to disable click actions for Tabs in flutter

Time:03-08

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;
                  },

CodePudding user response:

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

CodePudding user response:

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

IgnorePointer(
                child: TabBar())
  • Related