Flutter SystemUiOverlayStyle does not work with some configurations on Android #76384
Description
I'm using AnnotatedRegion widget to change status bar color. I expect the status bar color to switch between white and transparent. But nothing happens. Check _getSystemUiOverlayStyle method for how it's being done.
I tried changing the content of the _getSystemUiOverlayStyle method to the following, and then it successfully changes the color.
SystemUiOverlayStyle _getSystemUiOverlayStyle(BuildContext context) {
if (isTransparentStatusBar) {
return SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.transparent,
);
} else {
return SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.white,
statusBarIconBrightness: Brightness.dark,
);
}
}
Is this a bug or am I missing something?
Sample App
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isTransparentStatusBar = false;
void _toggleState() =>
setState(() => isTransparentStatusBar = !isTransparentStatusBar);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
top: false,
child: AnnotatedRegion<SystemUiOverlayStyle>(
value: _getSystemUiOverlayStyle(context),
child: Center(
child: Stack(
children: [
Container(
color: Theme.of(context).scaffoldBackgroundColor,
),
Center(
child: ElevatedButton(
onPressed: () => _toggleState(),
child:
Text(isTransparentStatusBar ? "Transparent" : "Opaque"),
),
),
],
),
),
),
),
);
}
SystemUiOverlayStyle _getSystemUiOverlayStyle(BuildContext context) {
if (isTransparentStatusBar) {
return SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
);
} else {
return SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.white,
statusBarIconBrightness: Brightness.dark,
);
}
}
}
Flutter doctor
[✓] Flutter (Channel stable, 1.22.6, on Mac OS X 10.15.4 19E287 darwin-x64, locale en-IN)
• Flutter version 1.22.6 at /Users/abhaysood/flutter
• Framework revision 9b2d32b605 (4 weeks ago), 2021-01-22 14:36:39 -0800
• Engine revision 2f0af37152
• Dart version 2.10.5
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/abhaysood/Library/Android/sdk
• Platform android-30, build-tools 30.0.3
• Java binary at: /Applications/Android Studio 2.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.0.1, Build version 12A7300
• CocoaPods version 1.10.1
[✓] IntelliJ IDEA Ultimate Edition (version 2020.3.2)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin installed
• Dart plugin version 203.6912