How to Enable or Disable Full Screen Mode in Flutter App

In this example, we are going to show you the best way to turn on fullscreen mode or exit from the fullscreen mode in Flutter App. Fullscreen mode can be used in different kinds of apps like games, IoT projects, or normal app as well. See the example below, and learn how to enable or disable fullscreen in the Flutter app.

First of all, add a fullscreen package in your dependency by adding the following lines in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  fullscreen: ^1.0.3

// to hide only bottom bar:
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.top]);
// to hide only status bar: 
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.bottom]);
// to hide both, enable complete fullscreen:
SystemChrome.setEnabledSystemUIOverlays ([]);

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

//---- call dispose() method anywhere (NOT RECOMMENDED) -----------

ElevatedButton(
  onPressed: (){
    dispose();
  },
  child: Text("Switch Full Screen"),
)

bool isfullscreen = await FullScreen.isFullScreen; //check current screen mode
if(isfullscreen){
  //current mode is full screen
}else{
  //current mode is not fullscreen
}

await FullScreen.enterFullScreen(FullScreenMode.EMERSIVE_STICKY);

await FullScreen.exitFullScreen();

Note: You may get Blank Black Screen at the Status bar and Bottom Bar, to prevent such a black screen in Android. Add the following lines in style.xml located at android/app/src/main/res/values/styles.xml inside <style> tag:

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fullscreen/fullscreen.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget{
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

 /*  you can enable fullscreen using initState(){} method
  @override
  void initState() {
     SystemChrome.setEnabledSystemUIOverlays([]); //enable fullscreen
    super.initState();
  } */ 

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

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]); //enable fullscreen
    return MaterialApp(
        title: "Test App",
        home: Scaffold( 
            appBar: AppBar( 
              title: Text("Full Screen App"),
              backgroundColor: Colors.redAccent
            ),
            body: Container( 
                   color: Colors.purple.shade100,
                   child: Center(
                       child: ElevatedButton( 
                           onPressed: () async {
                              bool isfullscreen = await FullScreen.isFullScreen; //check current screen mode
                              if(isfullscreen){
                                  await FullScreen.exitFullScreen(); //this is from fullscreen package
                                  // dispose();, you can call dispose method as well to disable fullscreen
                                  // without using package
                              }else{
                                   await FullScreen.enterFullScreen(FullScreenMode.EMERSIVE_STICKY);
                                   // enable fullscreen using fullscreen package
                                   //SystemChrome.setEnabledSystemUIOverlays([]); //enable full screen
                              }
                           },
                           child: Text("Switch Full Screen"),
                        ),

                   ),
                ),
            )
    );
  }
}