How to Enable or Disable Full Screen Mode in Flutter App

Ever wanted to give your app a truly immersive feel, like for a game, video player, or an image gallery? One of the best ways to do that is by using full-screen mode. It’s a simple change that can make a huge difference in user experience.

But how do you actually enable or disable full-screen mode in a Flutter app? And what are the best practices to keep in mind?

You’ve come to the right place. Here at FlutterStuff.com, we’re all about providing practical, in-depth tutorials to help you build amazing apps. In this guide, we’ll walk you through everything you need to know about managing full-screen mode in Flutter.

What is Full-Screen Mode, Anyway?

In the context of a mobile app, full-screen mode means hiding the system UI overlays—specifically, the status bar at the top (which shows the time, battery level, etc.) and the navigation bar at the bottom (with the back, home, and recent apps buttons on Android).

By hiding these system bars, your app’s content can take center stage, filling the entire screen. This is perfect for:

• Media-heavy apps: Think video players, image galleries, and e-readers.
• Gaming: To create an immersive gaming experience.
• Presentations: When you want your content to be the sole focus.

Enabling and Disabling Full-Screen Mode with SystemChrome

The hero of our story today is the SystemChrome class from Flutter’s services.dart library. This powerful class allows you to interact with and customize the system’s chrome (the UI elements drawn by the native platform).

To control the visibility of the system UI overlays, we use the SystemChrome.setEnabledSystemUIMode() method. This method takes a SystemUiMode enum as its argument, which defines how the system bars should behave.

How to Enable Full-Screen Mode

To make your app go full-screen, you’ll typically use one of the immersive modes. Let’s look at the most common ones.

SystemUiMode.immersive

This mode hides both the status and navigation bars. The user can temporarily bring them back by swiping from the edge of the screen where the bar is hidden. This is great for apps where the user needs to occasionally access the system UI but you want to prioritize an immersive experience.

Here’s how you enable it:

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Immersive Mode'),
        ),
        body: const Center(
          child: Text('Swipe from the top or bottom edge to see the system bars.'),
        ),
      ),
    );
  }
}

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Immersive Mode'),
        ),
        body: const Center(
          child: Text('Swipe from the top or bottom edge to see the system bars.'),
        ),
      ),
    );
  }
}

SystemUiMode.immersiveSticky

Similar to immersive, this mode also hides the system bars. However, with immersiveSticky, a swipe from the edge will reveal the bars in a semi-transparent state, and they will automatically hide again after a short period. This is the preferred mode for gaming or any app where accidental swipes from the edge shouldn’t fully interrupt the experience.

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

How to Disable Full-Screen Mode

To exit full-screen mode and bring back the system UI overlays, you can use SystemUiMode.edgeToEdge or manually specify which overlays to show.

SystemUiMode.edgeToEdge

This is the default mode for Flutter apps. It makes your app’s content appear edge-to-edge, but the system bars are still visible.

void exitFullScreen() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
}

void exitFullScreen() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
}

You could call this function from a button press or any other event in your app.

ElevatedButton(
  onPressed: exitFullScreen,
  child: const Text('Exit Full-Screen'),
),

ElevatedButton(
  onPressed: exitFullScreen,
  child: const Text('Exit Full-Screen'),
),

Manually Showing System UI Overlays

For more granular control, you can use SystemUiMode.manual and provide a list of overlays to show.

void showSystemUI() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
    SystemUiOverlay.top,
    SystemUiOverlay.bottom,
  ]);
}

void showSystemUI() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
    SystemUiOverlay.top,
    SystemUiOverlay.bottom,
  ]);
}

This will bring back both the status bar (SystemUiOverlay.top) and the navigation bar (SystemUiOverlay.bottom).

Handling App Lifecycle

A common challenge with full-screen mode is that it can sometimes be reset when the app’s lifecycle state changes (e.g., when the app is paused and resumed). To ensure your app stays in full-screen mode, you can use a WidgetsBindingObserver.

Here’s a quick example of how to re-apply the full-screen mode when the app is resumed:

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

  @override
  State<FullScreenPage> createState() => _FullScreenPageState();
}

class _FullScreenPageState extends State<FullScreenPage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _setFullScreen();
  }

  void _setFullScreen() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _setFullScreen();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    // It's good practice to exit full-screen when the page is disposed
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('This page will try to stay in full-screen mode.'),
      ),
    );
  }
}

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

  @override
  State<FullScreenPage> createState() => _FullScreenPageState();
}

class _FullScreenPageState extends State<FullScreenPage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _setFullScreen();
  }

  void _setFullScreen() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _setFullScreen();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    // It's good practice to exit full-screen when the page is disposed
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('This page will try to stay in full-screen mode.'),
      ),
    );
  }
}

Platform-Specific Considerations and Best Practices

While Flutter does a great job of providing a cross-platform API, there are some nuances to be aware of:

• iOS: On iOS, the concept of a persistent navigation bar at the bottom doesn’t exist in the same way as on Android. Full-screen mode on iOS primarily affects the status bar. The home indicator on newer iPhones will also be hidden in immersive modes.
• Android: As we’ve discussed, Android offers different immersive experiences. It’s important to choose the one that best fits your app’s use case.

Here are a few best practices to follow:

• Don’t force full-screen everywhere: Full-screen mode is not suitable for all screens. For forms or informational screens, users generally expect to see the system bars. Use it judiciously to enhance specific experiences.
• Provide an easy way out: If your app enters full-screen mode, make sure the user can easily exit it. This could be through a button or by simply using the standard system gestures.
• Test on different devices: The appearance and behavior of system bars can vary across different devices and OS versions. Always test your full-screen implementation on a range of devices.

For more in-depth UI design guides and app templates that follow best practices, be sure to check out the resources available on FlutterStuff.com.

Beyond Full-Screen: Controlling Screen Orientation

Often, when you’re thinking about full-screen mode, you’re also thinking about screen orientation. For a video player, you might want to force landscape mode when entering full-screen.

You can control the screen orientation using SystemChrome.setPreferredOrientations().

Here’s how you might force landscape mode:

void _enterFullScreenWithLandscape() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
}

void _enterFullScreenWithLandscape() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
}

And to go back to portrait and exit full-screen:

Dart

void _exitFullScreenAndPortrait() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
}

void _exitFullScreenAndPortrait() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
}

Wrapping Up

And there you have it! A comprehensive guide to enabling and disabling full-screen mode in your Flutter apps. By leveraging the SystemChrome class, you can create immersive and engaging user experiences with just a few lines of code.

Remember to choose the right full-screen mode for your content, handle app lifecycle changes gracefully, and always keep the user experience in mind.