Transparent status and navigation bar in Flutter for both Android and IOS

Question

I am making my first Flutter app and I have a question. I want to make the status bar and navigation bar transparent on both Android and IOS. This is what I have now: https://i.stack.imgur.com/h3DJ3.png

And this is what I want: https://i.stack.imgur.com/kKrec.png

I am a beginner in Flutter so if you have a solution, please make it simple. Thanks in advance!

Answer 1

In iOS you can not change color of the status bar according to their guidelines, though it is already transparent in iOS. For android, use it in the build method of your root widget:

if (Theme.of(context).platform == TargetPlatform.android) {
      SystemChrome.setSystemUIOverlayStyle(
          SystemUiOverlayStyle(statusBarColor: Colors.transparent));
    }

More details:

 import 'package:flutter/foundation.dart' show defaultTargetPlatform;
 Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Permission.camera.request();

  runApp(MyApp());
}


    class MyApp extends StatefulWidget {
      @override
      State<MyApp> createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      void initState() {
        SchedulerBinding.instance?.addPostFrameCallback((timeStamp) {
          if (defaultTargetPlatform == TargetPlatform.android) {
            SystemChrome.setSystemUIOverlayStyle(
                SystemUiOverlayStyle(statusBarColor: Colors.transparent));
          }
        });
        super.initState();
      }
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyHomePage(),
        );
      }
    }

Answer 2

You can set color or backgroundColor parameter to Colors.transparent as well.