Transluscent StatusBar in Flutter

Question

Please how can I achieve this transluscent effect on the status bar in flutter? I wish to use this on android devices <= ANDROID_19 and also on Lollipop.

Here is my current Code implementation

ThemeData lightTheme = ThemeData.light();
ThemeData darkTheme = ThemeData.dark();

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        systemNavigationBarColor: Colors.transparent),
  );
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainWidget(),
    ),
  );
}

Thanks

Answer 1

You can change color of StatusBar, like below

final ThemeData kIOSTheme = new ThemeData(
  primarySwatch: Colors.orange,
  primaryColor: Colors.grey[100],
  primaryColorBrightness: Brightness.light,
);

final ThemeData kDefaultTheme = new ThemeData(
  primarySwatch: Colors.purple,
  primaryColor: Colors.black,
  accentColor: Colors.black,
  brightness: Brightness.light,
);

void main() {
  SystemChrome.setSystemUIOverlayStyle(
     SystemUiOverlayStyle(
     statusBarColor: Colors.white, //top bar color
     statusBarIconBrightness: Brightness.dark, //top bar icons
     systemNavigationBarColor: Colors.white, //bottom bar color
     systemNavigationBarIconBrightness: Brightness.dark, //bottom bar icons
     )
  );
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
      .then((_) => runApp(new MyApp()));
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
  return MaterialApp(
     title: 'Home',
     debugShowCheckedModeBanner: false,
     theme: defaultTargetPlatform == TargetPlatform.iOS
          ? kIOSTheme
          : kDefaultTheme,
     home: MyHomePage(title: 'Welcome Home'),
  );
}

Answer 2

Set the color to Colors.transparent

import 'package:flutter/services.dart';

// Some code...

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