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