19

I want to prevent the tab from moving even if I tap on TabBar.

TabBar( controller: this._controller, tabs: <Widget>[ new Tab( text: "A", ), new Tab( text: "B", ), new Tab( text: "C", ), ])
Improve this question
2
  • Do want to disable the tab action? Commented Aug 18, 2018 at 6:24
  • @IshanFernando yes. Commented Aug 18, 2018 at 6:36

9 Answers 9

Reset to default
28

Just wrap the TabBar in an IgnorePointer.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This should be the correct and easiest answer.
this only works for all tabs, but what if you want to disable a specific tab present in the tabbar ?
17

I have a more elegant solution:

TabBar( onTap: (index) { if (_controller.indexIsChanging) { _controller.index = _controller.previousIndex; } else { return; } }, ),
Improve this answer

2 Comments

Nope, this will move to the previous tab when you tap the current tab which is not what the OP wants.
Resolved @DatTran comment with if (_controller.indexIsChanging) { _controller.index = _controller.previousIndex; } else { return; }. It does nothing when tapping the active tab, otherwise, it stays on the selected tab.
9

If you're embedding the TabBar in the bottom of an AppBar, you'll need to implement PreferredSizeWidget. This is easily achieved:

class ReadOnlyTabBar extends StatelessWidget implements PreferredSizeWidget { final TabBar child; const ReadOnlyTabBar({Key key, @required this.child}) : super(key: key); @override Widget build(BuildContext context) { return IgnorePointer(child: child); } @override Size get preferredSize => this.child.preferredSize; }
Improve this answer

Comments

3

I think you have to add listner to tab click and then change the index to 0 again. In this we need to add controller and we can set index through that.

 class TabBarDemoWidget extends State<TabBarDemo> with TickerProviderStateMixin{ @override Widget build(BuildContext context) { int _tabIndex = 0; var tab = TabController( initialIndex: 0, length: 3, vsync: this ); void _handleTabSelection(){ setState(() { tab.index = _tabIndex; }); } tab.addListener(_handleTabSelection); return DefaultTabController( length: 3, initialIndex: 0, child: TabBar( labelColor: Colors.teal, controller: tab, tabs: [ GestureDetector( child:Tab( icon: Icon( Icons.directions_car)) , onTap: (){ _tabIndex = 0; }, ),GestureDetector( child:Tab( icon: Icon(Icons.directions_car)) , onTap: (){ _tabIndex = 0; }, ),GestureDetector( child:Tab( icon: Icon(Icons.directions_car)) , onTap: (){ _tabIndex = 0; }, ) ], ), ); } }
Improve this answer

4 Comments

Thanks! I tried it. but, not working as expected. GestureDetector does not work onTap except on the icon.
I tested and it works. Can you explain which part is not work?
sorry..., I has removed addListener. it works. but, maybe, GestureDetector not needed. gyazo.com/5e5b61036e009cb37ce20a4c41de4937
This isn't a good way to handle tabs. Wrap IgnorePointer over TabBar and it will prevent from updating the state.
3

TabBar has a function onTap, you can do as below to not change tabs on tap.

TabBar( onTap: (index){ setState(() { _tabController.index = 0; }); }, controller: _tabController, ),
Improve this answer

Comments

3

if you want to disable onTapped in TabBar, just use IgonreOPoiner widget, wrap needed widget into IgnorePointer, and paste ignoring:true, to disable tap, click and e.t.c

IgnorePointer( ignoring:true, child:TabBar( tabs:[ Tab( child:Text("1"),), Tab( child:Text("2")), ])`
Improve this answer

Comments

2

@Rob Lyndon gave perfect answer.

This is another one like that only. But in this we are not creating one more class

Scaffold( appBar: AppBar( bottom: PreferredSize( preferredSize: Size.fromHeight(_kTextAndIconTabHeight + indicatorWeight), child: IgnorePointer( child: TabBar( ), ), ), ), );
Improve this answer

Comments

1

Pass a gesture detector to the tab that you want to disable. Set onTap as null to disable tap. Look at the example provided below!

TabBar( tabs: [ Tab(child: Text("15")), //enabled Tab(child: GestureDetector(child: Text("16"), onTap: null), //disabled ], ),
Improve this answer

1 Comment

does not work, you can still select(tap) the tab
0

Wrap the tab widget with GestureDetector, and follow the code!!

 TabBar( automaticIndicatorColorAdjustment: true, tabs: [ const Tab( child: TextWidget('Official'), ), GestureDetector( onTap: () {}, child: const Tab( child: TextWidget('PF,ESI'), ), ), ], indicatorSize: TabBarIndicatorSize.tab, tabAlignment: TabAlignment.start, isScrollable: true, ),
Improve this answer

Comments