Document how to use AnnotatedRegion to correctly set system ui color

When it gets back to a page with no AppBar, it seems build() won't be called.
So there is no chance to call setSystemUIOverlayStyle, no chance to recover the color of the status bar.
I tried to call that after await Navigator.push, but unfortunately it had no effect.

Reproduce code

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  @override
  Widget build(BuildContext context) {
    // Set background color of the system status bar to ensure it visible.
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            Padding(
              padding: const EdgeInsets.only(left: 16.0, right: 16.0),
              child: Text('This page does not have AppBar.\nThe text color of the status bar should be dark.\n\n' +
                  'Go to Next Page and get back here, then check the text color.\n' +
                  'Expected result :: the color recovers to be dark.'),
            ),
            RaisedButton(
                child: Text('Next Page'),
                onPressed: () async {
                  await Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => SecondPage()));
                  // The following lines will have no effect in vain.
                  debugPrint('get back');
                  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
                  setState(() {});
                }),
            Padding(
              padding: const EdgeInsets.only(top: 16.0),
              child: Text('setState() triggers build()'),
            ),
            RaisedButton(
              child: Text('Call setState()'),
              onPressed: () => setState(() {}),
            ),
          ]),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Text color of status bar is bright")),
      body: SafeArea(
        child: Center(
            child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Text("The AppBar in this page makes\nthe status bar text color bright.\nLet's get back to the previous page.")
        ])),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel beta, v0.11.13, on Mac OS X 10.14.1 18B75, locale en-US)
    • Flutter version 0.11.13 at /Users/tohru/Documents/src/flutter
    • Framework revision 58c8489fcd (26 hours ago), 2018-11-29 19:20:18 -0500
    • Engine revision 7375a0f414
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at /Users/tohru/Library/Android/sdk
    • Android NDK at /Users/tohru/Library/Android/sdk/ndk-bundle
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • ios-deploy 1.9.4
    • CocoaPods version 1.6.0.beta.2

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 24.2.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[✓] IntelliJ IDEA Ultimate Edition (version 2018.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 30.0.3
    • Dart plugin version 183.4284.122

A workaround.

await Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => SecondPage()));
Timer(Duration(milliseconds: 500), () {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
});

I have the same problem.

I'm using a TabController and the color resets upon navigation, if I do the workaround it looks weird since the colors flash

@jonahwilliams

@jonahwilliams You added the api docs tag. Can you briefly say what we need to improve in the docs so others looking at this issue have context?

Oh, I believe this is what we should document: #24969 (comment)

@jonahwilliams

@jonahwilliams should #24989 fix this or is there more work planned?

Somewhat related #27776

We still have the problem that it's not possible to return to the original color once we leave the page.

What I would like to do is to set a custom color only for a specific page, and once I leave the page it goes back to a default color.

Anyone have an update on how to use AnnotatedRegion for this? There's very little information out there on the widget.

My bad, it's a request for documentation
Thank you

@TahaTesser

@TahaTesser This isn't a bug, it's a request for documentation.

We still have the problem that it's not possible to return to the original color once we leave the page.

What I would like to do is to set a custom color only for a specific page, and once I leave the page it goes back to a default color.

when having not appbar set, using AnnotatedRegion like this

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Document how to use AnnotatedRegion to correctly set system ui color #24893

Reproduce code

flutter doctor -v

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Document how to use AnnotatedRegion to correctly set system ui color #24893

Description

Reproduce code

flutter doctor -v

Activity

reedom commented on Dec 1, 2018

dvaldivia commented on Dec 30, 2018

goderbauer commented on Jan 4, 2019

goderbauer commented on Jan 4, 2019

zoechi commented on Jan 16, 2019

zoechi commented on Feb 15, 2019

1 remaining item

lgvaz commented on Aug 26, 2019

jonas-zebari commented on Jan 24, 2020

TahaTesser commented on Mar 27, 2020

lukepighetti commented on Mar 27, 2020

akindone commented on Mar 31, 2020

github-actions commented on Mar 22, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions