CODEWITHSUNDEEP
dartflutter
Madlad 007
Madlad 007

Reputation: 225

How can i disable a particular tab in tabbar, to be able to click?

is there a way to disable a particular tab in the tabbar? so that it cannot be clicked unless it is enabled again? any help is appreciated, thanks!

Edit: Code with Absorb/Ignore Pointer not working:

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Widget>[
Tab(text: 'LEFT'),
    AbsorbPointer(
child: Tab(text: 'RIGHT')), //not working
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: myTabs.length);
  }

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(child: new Text(tab.text));
        }).toList(),
      ),
    );
  }
}

Upvotes: 9

Views: 13933

Answers (3)

thenish
thenish

Reputation: 77

It worked for me

TabBar(
onTap: (value) {
       if ( (_tabController?.indexIsChanging ?? false) &&
              _tabController?.index == disableIndex) {
            _tabController?.index = _tabController?.previousIndex ?? 1;
          }
        })

Upvotes: -1

Mangaldeep Pannu
Mangaldeep Pannu

Reputation: 3987

Here you go:

Add list to make which tab is disabled

List<bool> _isDisabled = [false, true];

Add a listener to _tabController

_tabController.addListener(onTap);

onTap() method. If selected tab is disabled we will revert to previous selected tab.

onTap() {
  if (_isDisabled[_tabController.index]) {
    int index = _tabController.previousIndex;
    setState(() {
      _tabController.index = index;
    });
  }
}

Below is the full code: 

import 'package:flutter/material.dart';

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  List<bool> _isDisabled = [false, true];

  final List<Tab> myTabs = <Tab>[
    Tab(text: 'LEFT'),
    Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

  onTap() {
    if (_isDisabled[_tabController.index]) {
      int index = _tabController.previousIndex;
      setState(() {
        _tabController.index = index;
      });
    }
  }

  @override
   void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
    _tabController.addListener(onTap);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return Center(child: new Text(tab.text));
        }).toList(),
      ),
    );
  }
}

Upvotes: 18

user3907398
user3907398

Reputation: 14

TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)), //enabled
            Tab(icon: Icon(Icons.directions_transit), onTap: null), //disabled
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),

Upvotes: -10

Related Questions