How to change tab in the Flutter Default Tab Controller? - flutter

Question

I'm using Flutter Default Tab Controller for shows the tab View. And I need to change the tab while clicking the button, I tried to change tab using setState, but I faild. These are my codes:
class _TabPageState extends State<TabPage> implements TabView {
int tabIndex = 0;
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
initialIndex: tabIndex,
child: Scaffold(
appBar: AppBar(),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(
color: Colors.green,
child: Center(
child: RaisedButton(
child: Text('to Tab 3'),
onPressed: () {
setState(() {
tabIndex = 2;
});
}),
),
),
Container(color: Colors.red),
Container(color: Colors.yellow),
Container(color: Colors.cyan),
],
),
bottomNavigationBar: TabBar(
labelColor: Colors.black45,
tabs: [
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('green')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('red')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('yellow')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('cyan')),
],
),
),
);
}
}

Answer 1

You can do this without stateful widgets by retrieving the controller with DefaultTabController.of(context) and then calling .animateTo(index) on it.
class TabPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
initialIndex: tabIndex,
child: Scaffold(
appBar: AppBar(),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(
color: Colors.green,
child: Center(
child: GoToThirdTabButton(),
),
),
Container(color: Colors.red),
Container(color: Colors.yellow),
Container(color: Colors.cyan),
],
),
bottomNavigationBar: TabBar(
labelColor: Colors.black45,
tabs: [
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('green')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('red')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('yellow')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('cyan')),
],
),
),
);
}
}
class GoToThirdTabButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return RaisedButton(
child: Text('to Tab 3'),
onPressed: () {
DefaultTabController.of(context).animateTo(2);
}
);
}
}
The button must be its own widget so the context it sees will have the tab controller attached to it.

Answer 2

Try this:
import 'package:flutter/material.dart';
class TabExample extends StatefulWidget {
#override
_TabExampleState createState() => _TabExampleState();
}
class _TabExampleState extends State<TabExample> {
var tabIndex = 0;
#override
Widget build(BuildContext context) {
var childList = [
Container(
color: Colors.green,
child: Center(
child: RaisedButton(
child: Text('to Tab 3'),
onPressed: () {
setState(() {
tabIndex = 2;
});
}),
),
),
Container(color: Colors.red),
Container(color: Colors.yellow),
Container(color: Colors.cyan),
];
return DefaultTabController(
length: 4,
initialIndex: tabIndex,
child: Scaffold(
appBar: AppBar(),
body: childList[tabIndex],
bottomNavigationBar: TabBar(
onTap: (index) {
setState(() {
tabIndex = index;
});
},
labelColor: Colors.black,
tabs: <Widget>[
Tab(text: 'Green'),
Tab(text: 'Red'),
Tab(text: 'Yellow'),
Tab(text: 'Cyan'),
],
),
),
);
}
}

Answer 3

Code Golf Solution
If you want to access the DefaultTabController without creating an entirely new StatelessWidget, you can add a Builder widget to add a new context layer. This makes it so your button can "see" the DefaultTabController:
Scaffold(
body: SafeArea(
child: DefaultTabController(
initialIndex: 0,
length: 3,
child: Builder( // Add this
builder: (context) {
return Column(
children: [
TabBar(
controller: DefaultTabController.of(context),
labelColor: Colors.black,
tabs: [
Tab(text: 'One'),
Tab(text: 'Two'),
Tab(text: 'Three'),
],
),
Expanded(child: Center(
child: OutlinedButton(
child: Text('Three'),
onPressed: (){
DefaultTabController.of(context)?.animateTo(2);
},
),
))
],
);
}
),
),
),
);