CODEWITHSUNDEEP
flutter
Valeh
Valeh

Reputation: 511

Transparent status bar in flutter

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

Upvotes: 50

Views: 54077

Answers (9)

CopsOnRoad
CopsOnRoad

Reputation: 267884

Recommended (with Flutter 2.0)

Don't use AnnotatedRegion as mentioned in the docs

Apps should not enclose an AppBar with their own AnnotatedRegion.

The preferred way is to use systemOverlayStyle property:

Scaffold(
  appBar: AppBar(
    systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),
  ),
)

Upvotes: 29

Brian
Brian

Reputation: 41

the easiest way to do it is to import services.dart and use SystemUIOverlayStyle:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

Upvotes: 4

Nisha Jain
Nisha Jain

Reputation: 757

This will help to make your status bar transparent

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark, // dark text for status bar
      statusBarColor: Colors.transparent));

Like:

enter image description here

Upvotes: 3

Yash Zade
Yash Zade

Reputation: 163

just do padding around the Scafold body parameter.

Scaffold(
         body: Padding(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), //this
            child: Widget
        )

if your scaffold has appBar

Scaffold(        
      appBar: AppBar(
                brightness: Brightness.dark, //this
      body: Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Widget
        )

Upvotes: 1

Sander Dalby Larsen
Sander Dalby Larsen

Reputation: 699

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.

Upvotes: 61

pipaliya ashish
pipaliya ashish

Reputation: 53

I was looking for solution for the same and I found a way to do this transparent statusbar icons Inside your Widget build(BuildContext context){ } just add below lines,,

While using dark theme, it will make statusbar like transparent and icons to white

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.light));

and the same goes for light theme

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.dark));

I am not sure if you are looking for this or something different but this works perfectly fine for me

Upvotes: 4

Mahdi Dahouei
Mahdi Dahouei

Reputation: 1941

You can also do it app widely before you run the app in the main.dart file:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(MyApp());
}

Upvotes: 35

Rohan Kandwal
Rohan Kandwal

Reputation: 9336

@sander-dalby-larsen solution works perfectly, however, the status bar icon color becomes an issue. Following solution makes status bar transparent and status bar icons and navigation bar color as black.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          statusBarColor: Colors.transparent, // transparent status bar
          systemNavigationBarColor: Colors.black, // navigation bar color
          statusBarIconBrightness: Brightness.dark, // status bar icons' color
          systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
        ),
        child: Scaffold(
          body: _getBody(context),
        ),
      ),
    );
  }

Upvotes: 13

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126774

Yes, this is possible on Android.

In order to do that, you can use SystemChrome. That class provides a setSystemUIOverlayStyle method and you can use it like this:

import 'package:flutter/services.dart';

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

Keep in mind that this will only work for Android versions equal to or greater than Android M and that you will need to draw below the status bar by avoiding the padding that a Scaffold adds automatically. You can do that by using:

...body: SafeArea(top: false, child: ...

Upvotes: 43

Related Questions