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 to the appBar). When I try to set the status bar color, it gets a different shade than the appBar. Thanks

Answer 1

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 2

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 3

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 4

Recommended (with Flutter 2.0)

Don't use AnnotatedRegion as mentioned in the docs

Apps should not enclose an AppBar with their own AnnotatedRegion.

The preferred way is to use systemOverlayStyle property:

Scaffold(
  appBar: AppBar(
    systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),
  ),
)

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),
        ),
      ),
    );
  }

Answer 6

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 7

This will help to make your status bar transparent

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark, // dark text for status bar
      statusBarColor: Colors.transparent));

Like:

Answer 8

just do padding around the Scafold body parameter.

Scaffold(
         body: Padding(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), //this
            child: Widget
        )

if your scaffold has appBar

Scaffold(        
      appBar: AppBar(
                brightness: Brightness.dark, //this
      body: Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Widget
        )

Answer 9

the easiest way to do it is to import services.dart and use SystemUIOverlayStyle:

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  runApp(NameOfYourApp());
}