Flutter Full Screen: Enhance Your App’s User Experience

When developing Flutter apps, you may want to provide users with an immersive experience by implementing a Flutter Full Screen mode. Full-screen mode hides system UI elements like the status bar and navigation bar, allowing the app to use the entire screen. In this article, we’ll explore how to implement Flutter Full Screen mode, along with various customization options, using practical examples.

Flutter Full Screen

What is Full Screen Mode in Flutter?

Flutter Full Screen mode refers to a display state where system overlays, such as the status bar and the navigation bar, are hidden. This can be useful in games, media applications, or any other app where the content is best experienced without distractions.

How to Enable Flutter Full Screen Mode

Flutter provides a flexible API for controlling the display modes through the SystemChrome class from the flutter/services.dart package. Here’s a step-by-step tutorial to help you implement Flutter Full-Screen mode.

Step 1: Import Required Packages

To manage system UI overlays, you need to import SystemChrome from the flutter/services.dart package:

import 'package:flutter/services.dart';

Step 2: Set Flutter Full Screen Mode

To enable Flutter Full-Screen mode, use the SystemChrome.setEnabledSystemUIMode() method with the SystemUiMode.manual argument, passing an empty list for overlays:

SystemChrome.setEnabledSystemUIMode(

  SystemUiMode.manual,

  overlays: [],

);

This hides both the status bar and the navigation bar, enabling Flutter Full-Screen mode.

Example: Flutter Full-Screen Button

Here’s a complete example that demonstrates how to toggle Flutter Full-Screen mode in a Flutter app

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

class HomePage extends StatelessWidget {

  const HomePage({super.key});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        backgroundColor: Colors.blue[200],

        centerTitle: true,

        title: const Text('Display Modes'),

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          children: [

            ElevatedButton(

              style: ElevatedButton.styleFrom(

                backgroundColor: Colors.pink,

                padding: const EdgeInsets.all(22),

              ),

              onPressed: () {

                

                SystemChrome.setEnabledSystemUIMode(

                  SystemUiMode.manual,

                  overlays: [],

                );

              },

              child: const Text(

                '     GO FULL SCREEN    ',

                style: TextStyle(

                  fontSize: 20,

                  fontWeight: FontWeight.bold,

                  color: Colors.white,

                ),

              ),

            ),

          ],

        ),

      ),

    );

  }

}

In this code, pressing the “GO FULL SCREEN” button enables Flutter Full-Screen mode by hiding both the status and navigation bars.

Step 3: Exit Flutter Full Screen Mode

To exit Flutter Full-Screen mode and show the system UI elements again, pass SystemUiOverlay.values to the overlays argument:

SystemChrome.setEnabledSystemUIMode(

  SystemUiMode.manual,

  overlays: SystemUiOverlay.values,

);

This method restores the status bar and navigation bar, returning to the regular screen mode.

Example: Exiting Flutter Full Screen Mode

ElevatedButton(

  style: ElevatedButton.styleFrom(

    backgroundColor: Colors.blue,

    padding: const EdgeInsets.all(22),

  ),

  onPressed: () {

    SystemChrome.setEnabledSystemUIMode(

      SystemUiMode.manual,

      overlays: SystemUiOverlay.values,

    );

  },

  child: const Text(

    'GO Regular Screen',

    style: TextStyle(

      fontSize: 20,

      fontWeight: FontWeight.bold,

      color: Colors.white,

    ),

  ),

),

This button restores the system overlays, allowing you to exit Flutter Full-Screen mode.

Customizing Full Screen Behavior

In addition to toggling between full and regular screens, Flutter lets you manage individual elements of the system UI:

• Hide only the navigation bar:

SystemChrome.setEnabledSystemUIMode(

  SystemUiMode.manual,

  overlays: [SystemUiOverlay.top],

);

• Hide only the status bar:

SystemChrome.setEnabledSystemUIMode(

  SystemUiMode.manual,

  overlays: [SystemUiOverlay.bottom],

);

These options provide flexibility when you want to partially hide system UI elements while keeping others visible.

Overall Output

Use Cases for Flutter Full-Screen

1. Gaming Apps: Many games benefit from a Flutter Full-Screen layout to maximize display area and minimize distractions.
2. Media & Video Players: Full-screen mode is essential for watching videos and viewing images without interference from the status bar.
3. Immersive Content: Apps that focus on delivering content, such as books or articles, can use Flutter Full-Screen mode for a distraction-free reading experience.

Conclusion

Flutter Full Screen mode offers a way to create a more immersive user experience by hiding system UI elements. With the SystemChrome.setEnabledSystemUIMode() method, you can easily enable Flutter Full-Screen or partially hidden modes based on your app’s needs. Whether you’re building games, media apps, or immersive experiences, the ability to toggle between display modes gives you the flexibility to design user-focused interfaces. By effectively integrating Flutter Full Screen mode, you can make your Flutter app stand out and provide users with a seamless and enjoyable experience.

Additional Resources

Links

– GitHub Repository

You can read also: Common Issues and Effective Solutions On Column Overflow