Flutter: How to reset TabController index upon bottom navigation - flutter

Question

I have a Flutter app with a Cupertino bottom navigation bar. The first page has tabbed views like this.
What I'm trying to achieve
Upon navigating away from that first page (or when tapping on any of the bottom navigation items/icons), I want the index of the tab controller on that first page to reset to 0 so that when I return to that first page, I see the initial tab by default (i.e. the car tab). The current default behaviour is that it will display whichever tab I left the page on.
How do I achieve the above? I've pasted in sample code below to somewhat replicate my scenario. I created the _resetTabIndex function that calls tabController.previousIndex and then tried to call that function whenever user navigates away from the page, but I couldn't get that to work. Thanks in advance for any help with this!
(NOTE: I have to stick with Cupertino bottom navigation because of other requirements in the real app)
main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'page1.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
enum TabItem { page1, page2 }
class TabItemData {
const TabItemData({#required this.title, #required this.icon});
final String title;
final IconData icon;
static const Map<TabItem, TabItemData> allTabs = {
TabItem.page1: TabItemData(title: 'Page 1', icon: Icons.shopping_cart_outlined),
TabItem.page2: TabItemData(title: 'Page 2', icon: Icons.person_outline_rounded),
};
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
TabItem _currentTab = TabItem.page1;
Map<TabItem, WidgetBuilder> get widgetBuilders {
return {
TabItem.page1: (_) => Page1(),
TabItem.page2: (_) => Scaffold(
appBar: AppBar(
title: Center(child: Text('Page 2')),
),
body: Center(child: Text('Page 2'))),
};
}
void _resetTabIndex(TabItem tabItem) {
setState(() => _currentTab = tabItem); // Ignore this. Set up for a behaviour in the complete app.
// How can I amend this function to trigger the resetTabIndex method in page1.dart (which one alternative I thought might work)?
}
#override
Widget build(BuildContext context) {
return CupertinoHomeScaffold(
currentTab: _currentTab,
onSelectTab: _resetTabIndex,
widgetBuilders: widgetBuilders,
);
}
}
class CupertinoHomeScaffold extends StatelessWidget {
CupertinoHomeScaffold({
Key key,
#required this.currentTab,
#required this.onSelectTab,
#required this.widgetBuilders,
}) : super(key: key);
final TabItem currentTab;
final ValueChanged<TabItem> onSelectTab;
final Map<TabItem, WidgetBuilder> widgetBuilders;
#override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: [
_buildItem(TabItem.page1),
_buildItem(TabItem.page2),
],
onTap: (index) => onSelectTab(TabItem.values[index]),
),
tabBuilder: (context, index) {
final item = TabItem.values[index];
return CupertinoTabView(
builder: (context) => widgetBuilders[item](context),
);
},
);
}
BottomNavigationBarItem _buildItem(TabItem tabItem) {
final itemData = TabItemData.allTabs[tabItem];
final color = currentTab == tabItem ? Colors.indigo : Colors.grey;
return BottomNavigationBarItem(
icon: Icon(itemData.icon, color: color),
title: Text(
itemData.title,
style: TextStyle(color: color),
),
);
}
}
page1.dart
import 'package:flutter/material.dart';
class Page1 extends StatefulWidget {
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 2);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
resetTabIndex() {
setState(() {
_tabController.previousIndex;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Center(child: Text('Page 1')),
),
body: TabBarView(
controller: _tabController,
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_bike),
],
),
);
}
}

Answer 1

When navigating away from that first page do this
_tabController.animateTo(0,duration: Duration(milliseconds: 200),curve:Curves.easeIn);