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.