TabBarView doesn't update InhertiedWidget state if tab is changed programatically - flutter

Question

I'm using an InhertiedWidget to manage the state of a counter in this app.
However, if I update the state and change tabs at the same time, the update doesn't seem to pass through to the individual tabs.
Repro steps
Go to tab B
Press + button
Expected behaviour
The tab changes to A, and the counter updates in the tab
Actual behaviour
The tab changes to A, but the counter does not update (even though the actual value changes)
Here's a video to explain what I mean - https://user-images.githubusercontent.com/19492893/186385977-7185afd5-0bec-4291-8085-d2c7f07fc50a.mov
Run on dartpad
import 'package:flutter/material.dart';
void main() => runApp(MainApp());
class MainApp extends StatefulWidget {
const MainApp({
Key? key,
}) : super(key: key);
#override
State<MainApp> createState() => _MainAppState();
}
class _MainAppState extends State<MainApp> {
int count = 1;
#override
Widget build(BuildContext context) {
return CounterInheritedWidget(
count: count,
child: MaterialApp(
home: DefaultTabController(
length: 2,
child: CounterTabs(
increment: increment,
),
),
),
);
}
void increment() {
setState(() {
count += 1;
});
}
}
class CounterInheritedWidget extends InheritedWidget {
const CounterInheritedWidget({
Key? key,
required this.count,
required Widget child,
}) : super(key: key, child: child);
final int count;
static CounterInheritedWidget of(BuildContext context) {
final CounterInheritedWidget? result =
context.dependOnInheritedWidgetOfExactType<CounterInheritedWidget>();
assert(result != null, 'No CounterInheritedWidget found in context');
return result!;
}
#override
bool updateShouldNotify(CounterInheritedWidget old) => count != old.count;
}
class CounterTabs extends StatelessWidget {
final VoidCallback increment;
const CounterTabs({Key? key, required this.increment}) : super(key: key);
#override
Widget build(BuildContext context) {
int count = CounterInheritedWidget.of(context).count;
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
DefaultTabController.of(context)?.animateTo(0);
increment();
});
},
),
appBar: AppBar(
title: Text("Actual value: $count"),
bottom: TabBar(
tabs: [
Tab(text: "A"),
Tab(text: "B"),
],
),
),
body: TabBarView(
children: [
Center(child: Text("Tab value: $count")),
Center(child: Text("Tab value: $count")),
],
),
);
}
}

Answer 1

increment UI update call event is canceled because animationTo, wait for UI update to finish then call animationTo, or set shouldUpdateNotify to always true
Future.delayed(const Duration(milliseconds:100),()=>DefaultTabController.of(context)?.animateTo(0));