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:)

Post a Comment

Previous Post Next Post

Subscribe Us


Get tutorials, Flutter news and other exclusive content delivered to your inbox. Join 1000+ growth-oriented Flutter developers subscribed to the newsletter

100% value, 0% spam. Unsubscribe anytime