Question 126889 in Android Studio Question posted in
The official documentation can be found here.

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

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:
enter image description here

Tags:

2

Answers


  1. 0

    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());
    }
    Login or Signup to reply.
  2. 0 
    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
      ),
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search