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

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