How to Make Fullscreen Flutter Application?

• General

With the help of StatusBar, users can control the status bar color, style theme, visibility, and translucent properties across iOS and Android. In this article, we will go through how to make a Fullscreen Flutter Application.

In this blog post, we’ll guide you through the process of creating fullscreen applications in Flutter. Whether you want to build immersive games, media players, or simply provide a distraction-free user experience, this comprehensive guide will equip you with the knowledge and techniques to achieve fullscreen functionality.

How to Make Fullscreen Flutter Application ??

It’s exactly like for the Android Status Bar.

Doing SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []); hides both the status bar and the navigation bar.

P/S :

Use this SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge); to disable full screen mode.

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

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'),
           ),
         ),
      );
   }
}

// to hide only bottom bar:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
     SystemUiOverlay.top,
    ]);

// to hide only status bar: 
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
     SystemUiOverlay.bottom]);

// to hide both:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

The below code is working perfectly for fullscreen:

// to show both or full screen:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);

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

@override
Widget build(BuildContext context) {
///Set color status bar
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: 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'
          ),
        ),
      ],
     ),
    ),
  );
}

A way to set in one class for fullscreen. and disable on other classes.

So to set full screen put this code in initState()

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

and to set back to normal. In dispose()

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

in the same class,

@override
  void dispose() {
        SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);
    super.dispose();
  }
    
  @override
  initState() {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
    super.initState();
  }

Now, you can’t set the

SystemChrome.restoreSystemUIOverlays();

in dispose(). because it is 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.`

Use SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);; in your initState() like this

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

  // Start full screen
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}

to start the screen in full-screen mode.

So now, use SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values); in your dispose() function to exit full-screen mode for next screens.

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

Conclusion:

Do let us know in the comments if you are still confused about something related to flutter.

So in this article, we have been through how to make a fullscreen flutter application.

And Stay tuned for more articles like flutter full-screen image, notch, dialog, ios, background image, widget, etc:)

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.