How to make the status bar background same as app background - Flutter - Make text black on white status bar?

I was using Color.transparent in Main() for it, but on white backgrounds the status bar text gets removed.

My code:

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ),
  );
  runApp(const MyApp());
}

Result:

CodePudding user response：

Try this :

import 'package:flutter/services.dart';

    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark,
      systemNavigationBarIconBrightness: Brightness.light,
        statusBarColor: Colors.black,  //any color of your choice 
       systemNavigationBarColor: Color(0xff282828),
    
      ));
      runApp(const YourApp());
    }

CodePudding user response：

Container(
  color: Colors.blue, // Status bar color
  child: SafeArea(
    left: false,
    right: false,
    bottom: false,
    child: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // App bar color
      ),
    ),
  ),
),