How to Make Fullscreen Flutter Application ??

· 4 min read
How to Make Fullscreen Flutter Application
How to Make Fullscreen Flutter Application

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.

How to Make Fullscreen Flutter Application ??

It’s exactly like for the 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.

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.setEnabledSystemUIOverlays ([SystemUiOverlay.top]);

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

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

The below code is working perfectly 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'
          ),
        ),
      ],
     ),
    ),
  );
}

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.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();
  }

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.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.

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

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 GuideFlutter ProjectsCode 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.

Leave a Reply