Make flutter application fullscreen
AndroidDartFlutterAndroid Problem Overview
How can I make a flutter application fullscreen. I already found out how to hide the status bar <https://stackoverflow.com/questions/43877288/hide-android-status-bar-on-flutter-app>;. but I can't seem to find how to hide the android navigation bar.
Android Solutions
Solution 1 - Android
It's exactly like for 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.
Solution 2 - Android
// to hide only bottom bar:
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.top]);
// to hide only status bar:
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.bottom]);
// to hide both:
SystemChrome.setEnabledSystemUIOverlays ([]);
Solution 3 - Android
setEnabledSystemUIMode
(Recommended):
Use -
Fullscreen (with restoration):
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
-
Fullscreen (without restoration):
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
-
Showing a particular overlay:
SystemChrome.setEnabledSystemUIMode( SystemUiMode.manual, overlays: [ SystemUiOverlay.top, // Shows Status bar and hides Navigation bar ], );
-
Exit fullscreen:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
Restoration: Once the status and navigation bar are presented, they will be hidden again.
Solution 4 - Android
Finally i found a way to set in one class for fullscreen. and disable on other classes.
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();
}
you can't set the
SystemChrome.restoreSystemUIOverlays();
in dispose(). because its 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.`
Solution 5 - Android
Below code is working perfect 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'
),
),
],
),
),
);
}
Solution 6 - Android
SystemChrome.setEnabledSystemUIOverlays([]);
This hides the top and bottom bars but the app size remains the same. It does not expand to full screen height.
Solution 7 - Android
this is my experience if i add SystemChrome.setEnabledSystemUIOverlays([]);
in init
or dispose
, status bar and navigation bar will back when you use keyboard , but if you use it like this it work perfect:
@override
Widget build(BuildContext context) {
// To make this screen full screen.
// It will hide status bar and notch.
SystemChrome.setEnabledSystemUIOverlays([]);
// full screen image for splash screen.
return Container(
child: new Image.asset('assets/splash.png', fit: BoxFit.fill));
}
}
inside of your widget
Solution 8 - Android
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.
Next 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);
}
Solution 9 - Android
Use SystemChrome.setEnabledSystemUIOverlays([]);
in your main, you can use WidgetsFlutterBinding.ensureInitialized();
beforehand if you get errors.
But, this does not persist through the app, and after a textfield loses focus you're supposed to call SystemChrome.restoreSystemUIOverlays()
after 1 second. Apparently "This is to prevent malware from permanently hiding navigation buttons". (Why not just keep the swipe down gesture to prevent being 'stuck inside' the app? )
in any case
My app is full of forms and that method seems like a lot of work.
I guess this solution is a bit hacky but i just created a service running in the background on a timer every second running SystemChrome.restoreSystemUIOverlays()
it looks like this:
class FullscreenService{
Timer? timer;
static FullscreenService? _instance;
FullscreenService._internal() {
timer = Timer.periodic(
Duration(seconds: 1), (Timer t) =>
SystemChrome.restoreSystemUIOverlays);
}
factory FullscreenService() => _instance ?? FullscreenService._internal();
void cancelTimer(){
timer!.cancel();
}
}
I'm hoping i wont have to use this in the future and if anyone has any ideas how to avoid this while still maintaining fullscreen please let me know... but at least its working for now.
Solution 10 - Android
In new version Flutter use this code:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
or
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
Solution 11 - Android
using SystemChrome.setEnabledSystemUIOverlays([]);
in initState()
or build()
method calling WidgetsFlutterBinding.ensureInitialized();
which is rebuilding the widget and calling the build()
method twice, to resolve this issue, I am using this function into my main()
function
void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
...
...
..
.
Solution 12 - Android
Use this pub package to do in a clean way.
If you want to enable it for specific screen, make sure this screen is a StatefulWidget (you can easily convert it with your IDE tools) and override the initState() and dispose():
import 'package:fullscreen/fullscreen.dart';
class ClockScreen extends StatefulWidget {
const ClockScreen({Key? key}) : super(key: key);
@override
State<ClockScreen> createState() => _ClockScreenState();
}
class _ClockScreenState extends State<ClockScreen> {
@override
void initState(){
FullScreen.enterFullScreen(FullScreenMode.EMERSIVE_STICKY);
super.initState();
}
@override
void dispose(){
FullScreen.exitFullScreen();
super.dispose();
}
@override
Widget build(BuildContext context) {
...
}
Solution 13 - Android
The AppBar is your Navigation bar so just remove it from your Code as illustrate below
//New This Code it should work , the AppBar is navigation bar
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'),
),
),
);
}
}