How to show an app bar for only 5 seconds-CodePudding

I'm trying to show an app bar for only 5 seconds only if there was no internet connection and it came back. Right now everything is working fine except that I want the app bar to be removed after 5 seconds and not stay there.

bool isVisible = true;
  late bool internetOffline = false;

  @override
  void initState() {
    super.initState();
    futureDataForStatus4 = getLocationStatus(context);
    Future.delayed(
      const Duration(seconds: 7),
      () {
        //asynchronous delay
        if (this.mounted) {
          setState(() {
            isVisible = true; // what im trying to do but doesnt work
          });
        }
      },
    );
  }

@override
  Widget build(BuildContext context) {
    return Consumer<ConnectivityChangeNotifier>(builder: (BuildContext context,
        ConnectivityChangeNotifier connectivityChangeNotifier, Widget? child) {
      if (connectivityChangeNotifier.pageText == 'No Internet') {
        if (internetOffline == false) {
          internetOffline = true;
        }
        return const OfflineStopWorkingScreen();
      } else {
        if (internetOffline == true) {
          internetOffline = false;
          isVisible = false;
        }

        return Scaffold(// what to show this appbar for only 5 seconds and 
                                                            remove it after
          appBar: isVisible == internetOffline 
              ? AppBar(
                  title: const Text(
                    'Connected to Internet',
                    style: TextStyle(fontSize: 16),
                  ),
                  centerTitle: true,
                  toolbarHeight: 30,
                  backgroundColor: Colors.green,
                )
              : null,

CodePudding user response：

What you can do is use a RestartableTimer (you'll have to manually add the import). Have a variable showOfflineAppBar, which will enable the showing of the AppBar. If you enable this, just reset the timer and the Timer will turn the notification off when needed.

This way, you don't hide the appbar when you have a connection, it is lost, you gain it back and you loose it again, all in 5 seconds...

import 'package:async/async.dart';
...
late final RestartableTimer showOfflineTimer;
var showOfflineAppBar = false;
...
void initState() {
showOfflineTimer = RestartableTimer(const Duration(seconds: 5), () {
  setState(() {
    showOfflineAppBar = false;
  });
});
...
@override
void dispose() {
  timer.cancel();
  super.dispose();
}
...
if (internetOffline && !showOfflineAppBar) {
  setState(() {
     showOfflineAppBar = true;
     showOfflineTimer.reset();
  });
}

CodePudding user response：

I found the answer and in this case i put the Future.delayed inside of build when the internet comes back and make it so the bool value becomes true after 4 seconds. And i removed everything from initState().

@override
  Widget build(BuildContext context) {
    return Consumer<ConnectivityChangeNotifier>(builder: (BuildContext context,
        ConnectivityChangeNotifier connectivityChangeNotifier, Widget? child) {
      if (connectivityChangeNotifier.pageText == 'No Internet') {
        if (internetOffline == false) {
          internetOffline = true;
        }
        return const OfflineStopWorkingScreen();
      } else {
        if (internetOffline == true) {
          internetOffline = false;
          isVisible = false;
          Future.delayed(
            const Duration(seconds: 4),
            () {
              if (mounted) {
                setState(
                  () {
                    isVisible = true;
                  },
                );
              }
            },
          );
        }

        return Scaffold(
          appBar: isVisible == internetOffline
              ? AppBar(
                  title: const Text(
                    'Connected to Internet',
                    style: TextStyle(fontSize: 16),
                  ),
                  centerTitle: true,
                  toolbarHeight: 30,
                  backgroundColor: Colors.green,
                  automaticallyImplyLeading: false,
                )
              : null,