Permanently hide Android bottom navigation and statusbar?

Question

my app will live on an Android tablet for the public, so logically I need to restrict what will be accessed. I need my app to always stay open, I can't exit it and when the device starts, it starts automatically (optional).

I'm using kiosk_mode, but the app is just pinned, if the person clicks on the screen the Android buttons are shown, in which they can hold and unpin the app, as well as pull the statusbar down and turn off the Wi-Fi, access the settings, for example.

Is there any way to do this blocking? In the application I hid a hidden button in which after entering a password, there are some settings, such as battery percentage, wifi settings, button to exit kiosk mode, which when clicked calls the stopKioskMode() function, to be able to exit the application in case of update, configuration...

But the problem is that the normal user can exit the application and use the tablet normally

Any idea? Thanks!

Answer 1

If you want to hide the System navigation bar and status bar in you'r project you can use SystemChrome class it provide by Flutter framework.

SystemChrome.setEnabledSystemUIOverlays([]);

now we try with toggle with button,

But I use Text widget with GestureDetector instance of a Button,

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

class StatusBar extends StatefulWidget {
  const StatusBar({super.key});

  @override
  State<StatusBar> createState() => _StatusBarState();
}

class _StatusBarState extends State<StatusBar> {
  bool hideStatus = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  hideStatus = !hideStatus;

                  if (hideStatus) {
                    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
                        overlays: SystemUiOverlay.values);
                  } else {
                    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
                        overlays: []);
                  }
                });
              },
              child: const Text('Hide Status Bar'),
            ),
          ],
        ),
      ),
    );
  }
}

and I call it from my MaterialApp like bellow,

import 'package:chat_app/hide.dart';
import 'package:chat_app/resources/font.dart';
import 'package:chat_app/screens/signup.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StatusBar(),
    );
  }
}