Should the modal barrier of an Alert also change the color of the status bar?

Steps to Reproduce

Create a custom Status Bar color with

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.red,
));

Then create an AlertDialog that shows up on an event

new AlertDialog(
                    title: new Text("Something went wrong!"),
                    content:
                        new Text("Be sure you are connected to the Device"),
                    actions: [
                      new FlatButton(
                          child: const Text("Ok"),
                          onPressed: () {
                            Navigator.pop(context);
                            _alertShown = 0;
                          }),
                    ])

When the AlertDialog is fired up the custom status bar color stays bright and its opacity is not affected

Please add the output of flutter doctor -v.

Okay.. here is some sample code that you can try out to see the bug

main.dart

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  void changeColor(r, g, b) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
      statusBarColor: Color.fromRGBO(r, g, b, 1.0),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: RaisedButton(
                child: Text("Change Color"),
                color: Color.fromRGBO(32, 205, 125, 1.0),
                onPressed: () {
                  changeColor(32, 205, 125);
                  Future.delayed(const Duration(seconds: 5), () {
                    
                    showDialog(
                        context: context,
                        builder: (_) => new AlertDialog(
                                title: new Text("Something went wrong!"),
                                content: new Text(
                                    "Be sure you are connected to the Device"),
                                actions: [
                                  new FlatButton(
                                      child: const Text("Ok"),
                                      onPressed: () {
                                        Navigator.pop(context);
                                        changeColor(244, 128, 36);
                                      }),
                                ]));
                  });
                  print("times up");
                  
                })));
  }
}

And here is what I get when I run flutter doctor - v

[√] Flutter (Channel beta, v0.9.5-pre.1, on Microsoft Windows [Version 10.0.17134.407], locale en-US)
    • Flutter version 0.9.5-pre.1 at D:\flutter_windows_v0.9.4-beta\flutter
    • Framework revision 8a57b9bdf9 (3 weeks ago), 2018-11-13 21:13:54 +0530
    • Engine revision 74625aed32
    • Dart version 2.1.0-dev.5.0.flutter-a2eb050044

[√] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at D:\ProgramFiles\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = D:\ProgramFiles\Android\sdk
    • Java binary at: D:\ProgramFiles\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
    • All Android licenses accepted.

[√] Android Studio (version 3.2)
    • Android Studio at D:\ProgramFiles\Android\Android Studio
    • Flutter plugin version 30.0.1
    • Dart plugin version 181.5656
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[√] Connected devices (1 available)
    • MI PAD 4 • 44d56e4 • android-arm64 • Android 8.1.0 (API 27)

• No issues found!

@jonahwilliams

@jonahwilliams - is this expected Android behavior?

This is expected but the correct approach is not quite documented yet. For reference here is a working implementation that uses the AnnotatedRegion widget:

https://gist.github.com/jonahwilliams/a0c278572f9bdce77104a47e39b4a72a

The problem with using setSystemUIOverlayStyle directly is that it competes with every other call, including those sent via the appBar. Whereas the AnnotatedRegion determines the correct style to use based on hit testing, so you can more easily control which style is used

I think I misunderstood the issue, I don't think the status bar should be obscured?

I turned #24893 into the doc bug regarding AnnotatedRegion.

For this bug, the open question is should the modal barrier of an Alert also change the color of the status bar? We should check some native apps to see what they do.

Any updates on this?

To answer the title, imo, yes. The modal barrier of an alert should change both the status bar and the navigation bar.

any solution?

As this is linked to #49941, this is my solution for bottomsheet usecase.

Though I believe this is just temporary until fixed in offical release.
You would have to handle dialog color, margin from the statusbar by yourself though.

Do note that in other screens, I use systemOverlayStyle parameter in AppBar to change statusbar's color.

class BottomSheetUtil {
  const BottomSheetUtil();

  Future<T?> show<T>(
    BuildContext context, {
    WidgetBuilder? contentBuilder,
  }) {
    return showModalBottomSheet<T>(
      context: context,
      isScrollControlled: true,
      useRootNavigator: true,
      backgroundColor: Colors.transparent, // we will need to set the background color by ourself in `_BottomSheetWidget`
      builder: (context) => const _BottomSheetWidget(),
    );
  }
}

class _BottomSheetWidget extends StatelessWidget {
  const _BottomSheetWidget();


  @override
  Widget build(BuildContext context) {
    return const AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, // set statusbar color to transparent, this will cause overlay effect
      ),
      sized: false, // set this too
      child: Placeholder(), // handle the margin, backgroundColor, padding by yourself
    );
  }
}

And this is workaround for dialog usecase

Do note that in other screens, I use systemOverlayStyle parameter in AppBar to change statusbar's color.

class DialogUtils {
  const DialogUtils();

  Future<T?> show<T>(BuildContext context) {
    return showDialog<T>(
      context: context,
      builder: (context) => const _Dialog(),
    );
  }
}

class _Dialog extends StatelessWidget {
  const _Dialog();

  @override
  Widget build(BuildContext context) {
    return const AnnotatedRegion<SystemUiOverlayStyle>( // add this
      sized: false, // important
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, // set color to transparent
      ),
      child: Dialog(
        child: Placeholder(),
      ),
    );
  }
}

@darshankawar

@darshankawar do you have an update on this issue?

The workarounds above do not work when useSafeArea is true in the showModalBottomSheet.

I had to do the following to imitate useSafeArea by settings the maxHeight of the bottom sheet:

store MediaQuery.viewPaddingOf(context).top in state at the start of the app
set maxHeight of the in showModelBottomSheet by adding:

    constraints: BoxConstraints(
      maxHeight:
          MediaQuery.of(context).size.height - ref.read(topPaddingProvider),
    ),

make status bar transparent like in the workarounds above by wrapping the widget with:

AnnotatedRegion<SystemUiOverlayStyle>(
        sized: false,
        value: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
        ),
        child: widget,
)

But this workaround doesn't work exactly, since making the status bar transparent is not the same as it staying it's current color but being darkened by flutter like the default behaviour.

AnnotatedRegion<SystemUiOverlayStyle>(
  sized: false,
  value: SystemUiOverlayStyle(
    statusBarColor: Theme.of(context)
        .appBarTheme
        .systemOverlayStyle!
        .statusBarColor!
        .withAlpha(1)
        .withBlue(1)
        .withGreen(1),
  ),
  child: const Placeholder(),
)

Navigation Menu

Repository navigation

Should the modal barrier of an Alert also change the color of the status bar? #24969

Steps to Reproduce

27 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Should the modal barrier of an Alert also change the color of the status bar? #24969

Description

Steps to Reproduce

Activity

zoechi commented on Dec 5, 2018

sdivakarrajesh commented on Dec 5, 2018

HansMuller commented on Dec 5, 2018

jonahwilliams commented on Dec 5, 2018

jonahwilliams commented on Dec 5, 2018

goderbauer commented on Jan 4, 2019

27 remaining items

armandojimenez commented on May 11, 2023

Andrewcpu commented on May 18, 2023

angelru commented on Nov 10, 2023

SilentCatD commented on Dec 16, 2023

SilentCatD commented on Dec 16, 2023

RCVZ commented on Aug 17, 2024

Jonny1987 commented on Oct 30, 2024

Jonny1987 commented on Oct 30, 2024

ondikumana commented on Dec 3, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions