Transparent status bar in flutter

Question

I just started using flutter and android studio and I was wondering if there’s a way to make a transparent status bar like the pic on Android (no transition from the status bar

Answer 1

I was looking for solution for the same and I found a way to do this transparent statusbar icons Inside your Widget build(BuildContext context){ } just add below lines,,

While using dark theme, it will make statusbar like transparent and icons to white

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.light));

and the same goes for light theme

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.dark));

I am not sure if you are looking for this or something different but this works perfectly fine for me

Answer 2

You can use the AnnotatedRegion widget with SystemUiOverlayStyle to change the chrome styles.

import 'package:flutter/services.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(...),
    );
  }
}

You can read more about what's possible with SystemUiOverlayStyle here.

Answer 3

Yes, this is possible on Android.

In order to do that, you can use SystemChrome. That class provides a setSystemUIOverlayStyle method and you can use it like this:

import 'package:flutter/services.dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent));

Keep in mind that this will only work for Android versions equal to or greater than Android M and that you will need to draw below the status bar by avoiding the padding that a Scaffold adds automatically. You can do that by using:

...body: SafeArea(top: false, child: ...

Answer 4

You can also do it app widely before you run the app in the main.dart file:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(MyApp());
}

Answer 5

@sander-dalby-larsen solution works perfectly, however, the status bar icon color becomes an issue. Following solution makes status bar transparent and status bar icons and navigation bar color as black.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          statusBarColor: Colors.transparent, // transparent status bar
          systemNavigationBarColor: Colors.black, // navigation bar color
          statusBarIconBrightness: Brightness.dark, // status bar icons' color
          systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
        ),
        child: Scaffold(
          body: _getBody(context),
        ),
      ),
    );
  }