I wanted to click on the Comment icon with the number 2 badge and for it to take me to the 2nd tab.The solution was to use a _tabController.animateTo(index) methods. This snippet is from 2018 and, updated for the current Flutter version, works perfectly.
The highlighted area is the relevant code.
main.dart
import 'package:flutter/material.dart';
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({Key? key}) : super(key: key);
@override
State createState() => MyTabbedPageState();
}
class MyTabbedPageState extends State
with SingleTickerProviderStateMixin {
final List myTabs = [
const Tab(text: 'Tab One'),
const Tab(text: 'Tab Two'),
];
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: myTabs.length);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Tab demo"),
bottom: TabBar(
controller: _tabController,
tabs: myTabs,
),
),
body:TabBarView(
controller: _tabController,
children: myTabs.map((Tab tab) {
return Center(child: Text(tab.text!));
}).toList(),
),
floatingActionButton: FloatingActionButton(
// Switch tabs
onPressed: () =>
_tabController.animateTo((_tabController.index + 1) % 2),
child: const Icon(Icons.swap_horiz),
),
);
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyTabbedPage(),
);
}
}