My widget is rebuilt when toggling visibility where it shouldn't - flutter

Question

I have a StatefulWidget that basically consists on a background widget (an playing video) and foreground HUD Column of Widget. The later visibility can be toggled by taping on an ElevatedButton.
The number of views StatefulWidget fetches the count from a remote cloud-based database, and while actually fetching, displays a CircularProgressIndicator.
This widget is part of the HUD.
Why does it fetches the database again when I toggle the HUD? And what to do to keep the counter into memory?
This is the main Widget:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(title: Text(widget.ad.title)),
body: Stack(
children: [
GestureDetector(
onTap: () {
if (_displayHud.value == false) {
_displayHud.value = true;
}
},
// == the background image
child: _buildBackgroundImage(context)),
// === The foreground UI
FutureBuilder(
future: widget.ad.getOwnerUser,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
final owner = snapshot.data!;
return ValueListenableBuilder(
valueListenable: _displayHud,
builder: (context, value, child) {
return Visibility(
visible: _displayHud.value,
replacement: Align(
alignment: Alignment.topRight,
child: ElevatedButton(
onPressed: () {
if (_displayHud.value == false) {
_displayHud.value = true;
}
},
child: const Icon(
Icons.fullscreen_exit,
))),
child: Padding(
padding: const EdgeInsets.all(20),
child: _buildForegroundUi(context,
watchingUser: widget.watchingUser,
owner: owner)),
);
});
})
],
));
}
And here is the count Widget:
/// A widget that display a coun from a future
class _CounterWidget extends StatefulWidget {
/// The icon to display
final IconData iconData;
/// The future that fetches the count
final Future<int> getCount;
/// The press callback
final void Function()? onPressed;
const _CounterWidget(
{required this.iconData, required this.getCount, this.onPressed});
#override
State<_CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<_CounterWidget> {
int? _value;
Exception? _error;
#override
void initState() {
_asyncInitState();
super.initState();
}
void _asyncInitState() async {
widget.getCount.then((value) {
if (!mounted) return;
setState(() {
_value = value;
});
}).catchError((e) {
if (!mounted) return;
setState(() {
_error = e;
});
});
}
#override
Widget build(BuildContext context) {
const viewerIconColor = Colors.white;
final viewerTextStyle =
Theme.of(context).textTheme.caption?.copyWith(color: Colors.white);
final countWidget = _error != null
? const Icon(Icons.error)
: _value == null
? const Center(child: CircularProgressIndicator())
: Text("$_value", style: viewerTextStyle);
// === Likes
if (widget.onPressed == null) {
return Column(children: [
Icon(widget.iconData, color: viewerIconColor),
countWidget
]);
}
return ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
//side: BorderSide(color: Colors.red)
))),
onPressed: widget.onPressed,
child: Column(children: [Icon(widget.iconData), countWidget]));
}
}

Answer 1

i've faced this similar issue before. you can see this guy explain with StreamBuilder. since this its a video, i'll cut a clip. you can see here:
problem : https://youtube.com/clip/UgkxU3QOcatZOh1bSRe3KwEEValakNU5josE
solution: https://youtube.com/clip/UgkxME0hQM6r0bXzFB43nAi5kZCKt1DV0IMn
in summary, you can assign your future function as state variable.
class _YourClassWidgetState extends State<YourClass> {
final _futureFunc = widget.ad.getOwnerUser(); // declare as state variable
....
// === The foreground UI
FutureBuilder(
future: _futureFunc,
note: i use setState() to update my UI, and since you are using ValueNotifier() i dont know it will same behaviour. You may try it on your side.
but my hypothesis it will same. because updating ValueListenableBuilder which also update the FutureBuilder *cmiiw