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

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(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(...),
    );
  }
}

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