Make flutter application fullscreen | How to enable fullscreen in flutter?

Question

How can I make a flutter application fullscreen. I already found out how to hide the status bar Hide Android Status Bar On Flutter App. but I can't seem to find how to hide the android navigation bar.

Answer 1

It's exactly like for Android status bar.

Doing SystemChrome.setEnabledSystemUIOverlays([]) hides both the status bar and the navigation bar.

p/s : use this SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values); to disable full screen mode.

Answer 2

Use setEnabledSystemUIMode (Recommended):

• Fullscreen (with restoration):

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  

• Fullscreen (without restoration):

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  

• Showing a particular overlay:

  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: [
      SystemUiOverlay.top, // Shows Status bar and hides Navigation bar
    ],
  );
  

• Exit fullscreen:

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  

_{Restoration: Once the status and navigation bar are presented, they will be hidden again.}

Answer 3

// to hide only bottom bar:
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.top]);

// to hide only status bar: 
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.bottom]);

// to hide both:
SystemChrome.setEnabledSystemUIOverlays ([]);

Answer 4

Finally i found a way to set in one class for fullscreen. and disable on other classes.

To set full screen put this code in initState()

SystemChrome.setEnabledSystemUIOverlays([]);

and to set back to normal. In dispose()

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

in the same class.

@override
  void dispose() {
        SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    super.dispose();
  }
    
  @override
  initState() {
      SystemChrome.setEnabledSystemUIOverlays([]);
    super.initState();
  }

you can't set the

SystemChrome.restoreSystemUIOverlays();

in dispose(). because its already saying

**Restores the system overlays to the last settings provided via [setEnabledSystemUIOverlays].**
May be used when the platform force enables/disables UI elements.
          
For example, when the Android keyboard disables hidden status and navigation bars,
this can be called to re-disable the bars when the keyboard is closed.
          
On Android, the system UI cannot be changed until 1 second after the previous
change. This is to prevent malware from permanently hiding navigation buttons.`

Answer 5

Below code is working perfect for fullscreen

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

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

@override
Widget build(BuildContext context) {
///Set color status bar
 SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
   return Scaffold(
   backgroundColor: Colors.white,
   body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Image.asset(
          'images/ic_splash_logo.png',
          width: 97.0,
          height: 115.0,
          fit: BoxFit.contain,
        ),
        SizedBox(
          height: 10.0,
        ),
        Text(
          'iComplain',
          style: TextStyle(fontSize: 24,
              color: Color(0xFF174D73),
            fontFamily: 'Helvetica'
          ),
        ),
      ],
     ),
    ),
  );
}

Answer 6

SystemChrome.setEnabledSystemUIOverlays([]);

This hides the top and bottom bars but the app size remains the same. It does not expand to full screen height.

Answer 7

this is my experience if i add SystemChrome.setEnabledSystemUIOverlays([]); in init or dispose , status bar and navigation bar will back when you use keyboard , but if you use it like this it work perfect:

  @override
  Widget build(BuildContext context) {

    // To make this screen full screen.
    // It will hide status bar and notch.
    SystemChrome.setEnabledSystemUIOverlays([]);

    // full screen image for splash screen.
    return Container(
            child: new Image.asset('assets/splash.png', fit: BoxFit.fill));
      }
    }

inside of your widget

Answer 8

Use SystemChrome.setEnabledSystemUIOverlays([]); in your main, you can use WidgetsFlutterBinding.ensureInitialized(); beforehand if you get errors.

But, this does not persist through the app, and after a textfield loses focus you're supposed to call SystemChrome.restoreSystemUIOverlays() after 1 second. Apparently "This is to prevent malware from permanently hiding navigation buttons". (Why not just keep the swipe down gesture to prevent being 'stuck inside' the app? ) in any case My app is full of forms and that method seems like a lot of work.

I guess this solution is a bit hacky but i just created a service running in the background on a timer every second running SystemChrome.restoreSystemUIOverlays() it looks like this:

    class FullscreenService{
  
    Timer? timer;
    static FullscreenService? _instance;
    FullscreenService._internal() {
    timer = Timer.periodic(
    Duration(seconds: 1), (Timer t) => 
    SystemChrome.restoreSystemUIOverlays);
    }

    factory FullscreenService() => _instance ?? FullscreenService._internal();

    void cancelTimer(){
    timer!.cancel();
   }
  }

I'm hoping i wont have to use this in the future and if anyone has any ideas how to avoid this while still maintaining fullscreen please let me know... but at least its working for now.

Answer 9

In new version Flutter use this code:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

or

 SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

Answer 10

Use this pub package to do in a clean way.

If you want to enable it for specific screen, make sure this screen is a StatefulWidget (you can easily convert it with your IDE tools) and override the initState() and dispose():

import 'package:fullscreen/fullscreen.dart';

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

  @override
  State<ClockScreen> createState() => _ClockScreenState();
}

class _ClockScreenState extends State<ClockScreen> {

  @override
  void initState(){
    FullScreen.enterFullScreen(FullScreenMode.EMERSIVE_STICKY);
    super.initState();
  }
  
  @override
  void dispose(){
    FullScreen.exitFullScreen();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ...
  }

Answer 11

Use SystemChrome.setEnabledSystemUIOverlays([]); in your initState() like this:

  void initState() {
    super.initState();
    print("Splash");

    // Start full screen
    SystemChrome.setEnabledSystemUIOverlays([]);
  }

to start the screen in full-screen mode.

Next use SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values); in your dispose() function to exit full-screen mode for next screens.

  void dispose() {
    super.dispose();
    // Exit full screen
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
  }

Answer 12

Update:

To Enable full screen in flutter app in your stateless or stateful widget

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

To exit the full screen mode

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);

Example

@override
  void initState() {
    // Start full screen
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    // Exit full screen
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);
  }

Answer 13

using SystemChrome.setEnabledSystemUIOverlays([]); in initState() or build() method calling WidgetsFlutterBinding.ensureInitialized(); which is rebuilding the widget and calling the build() method twice, to resolve this issue, I am using this function into my main() function

void main() {

SystemChrome.setEnabledSystemUIOverlays([]);
...
...
..
.

Answer 14

The AppBar is your Navigation bar so just remove it from your Code as illustrate below

//New This Code it should work , the AppBar is navigation bar

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {      
   @override
   Widget build(BuildContext context) {
      return new MaterialApp(
         home: new Scaffold(
           body: new Center(
              child: new Text('Hello World'),
           ),
         ),
      );
   }
}