Repository navigation
Document how to use AnnotatedRegion to correctly set system ui color #24893
Description
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
Activity
reedom commentedon Dec 1, 2018
A workaround.
dvaldivia commentedon Dec 30, 2018
I have the same problem.
I'm using a
TabControllerand the color resets upon navigation, if I do the workaround it looks weird since the colors flashgoderbauer commentedon Jan 4, 2019
@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?
goderbauer commentedon Jan 4, 2019
Oh, I believe this is what we should document: #24969 (comment)
[-]iOS status bar text color does not get recovered when get back to no AppBar page[/-][+]Document how to use AnnotatedRegion to correctly set system ui color[/+]zoechi commentedon Jan 16, 2019
@jonahwilliams should #24989 fix this or is there more work planned?
zoechi commentedon Feb 15, 2019
Somewhat related #27776
1 remaining item
lgvaz commentedon Aug 26, 2019
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.
jonas-zebari commentedon Jan 24, 2020
Anyone have an update on how to use AnnotatedRegion for this? There's very little information out there on the widget.
TahaTesser commentedon Mar 27, 2020
My bad, it's a request for documentation
Thank you
lukepighetti commentedon Mar 27, 2020
@TahaTesser This isn't a bug, it's a request for documentation.
akindone commentedon Mar 31, 2020
when having not appbar set, using AnnotatedRegion like this
github-actions commentedon Mar 22, 2023
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 -vand a minimal reproduction of the issue.