Flutter Status Bar transparent
Solution 1
As Frank Nike suggests, the SafeArea widget conflicts with the
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light
));
Therefore, what solved the problem for me was removing the SafeArea completely and setting:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]);
Solution 2
I recently struggled with this too.
My Solution was
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light
));
In my case, safearea was interfering with the changes which made it still show black with white text. I would advice you test on a physical device too.
Caspar Bm
Updated on January 03, 2023Comments
-
Caspar Bm over 1 year
How can I make the status and the option bar (on the bottom) transparent?
I tried many thinks but its still black with white text
Here is the code that I already implemented:
Future main() async { WidgetsFlutterBinding.ensureInitialized(); ... SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( systemStatusBarContrastEnforced: true, statusBarColor: Colors.transparent, systemNavigationBarColor: Colors.transparent, systemNavigationBarDividerColor: Colors.transparent, systemNavigationBarIconBrightness: Brightness.light, statusBarIconBrightness: Brightness.light)); SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]); ... runApp(...)
and in my Material app:
return MaterialApp.router( theme: ThemeData( appBarTheme: AppBarTheme( //systemOverlayStyle: SystemUiOverlayStyle.light, backgroundColor: Colors.transparent), ), color: Colors.transparent, ...
I know that AppBar and status bar is not the same (just wanted to include it anyway). Thanks so much in advance.
UPDATE:
I tried to remove the Safearea, who apparently conflicted with the status and navigation bar. It resulted in this:
As now its still not really transparent and also the bottom is messed up. Any ideas?
-
Caspar Bm about 2 yearsThanks! It helped a little bit (check out Updated version of the question) but its still not working.