Flutter: Hide and show status bar an navigation bar with the help of Floating Action button?-CodePudding

I want to know how will I hide and show the status bar and navigation bar with the help of a Floating action button how can I do this? By default, the status bars will show but when clicking on the button they will hide, and again click they will show..

Future hide() => SystemChrome.setEnabledSystemUIOverlays([]);

Future show() => SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

CodePudding user response：

You can use the following code.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class StatusBarExample extends StatefulWidget {
  const StatusBarExample({Key? key}) : super(key: key);

  @override
  State<StatusBarExample> createState() => _StatusBarExampleState();
}

class _StatusBarExampleState extends State<StatusBarExample> {
  var _isEnabled = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text(_isEnabled ? 'Disable' : 'Enable'),
        onPressed: () {
          if (_isEnabled) {
            SystemChrome.setEnabledSystemUIOverlays([]);
          } else {
            SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
          }
          _isEnabled = !_isEnabled;
          setState(() {});
        },
      ),
    );
  }
}

Also the methods you are using have been depricated. try to use the following methods.

Hide

 SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

Show

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);