CupertinoBar color does not update with brightness, for dark mode. #51899
Comments
|
@LongCatIsLooong the issue is ok or need more info? |
|
Thanks for creating this issue. The "expected results" and "actual results" sections seem to be describing 2 different issues?
|
|
*Edit Why I have to set color black to change it?, it should change with brightness like the bottom bar does. |
|
Even if I update the appbar to CupertinoNavigationBar inside MyHomePage like the image below, it doesn't update te color when ThemeMode.dark is set.
|
If I remember it correctly
It should. I'll give it a try when I get a chance. Could you also paste the code you used to produce the screenshot in #51899 (comment)? |
|
Thanks for the response, this is the code I used |
|
With the code above the entire app is supposed to be in light mode, as the dark theme specified is actually a light theme. The tab bar is in dark mode color because |
LongCatIsLooong
added
f: cupertino
|
Ohh ok, but you say that with the above code the app is supposed to be in light mode, why ? I set everything to black. Could you show me how to set a real dark theme please |
|
I have to override barBackgroundColor: Color(0xF01D1D1D), the app bar changes (IMG_1), but if it's commented looks white (IMG_2) IMG_1: IMG_2: |
|
An easy way to get a dark theme is Yes |
TahaTesser
added
the
has reproducible steps
|
Hi, any update? |
|
Persists with current master flutter doctor -v |
|
@LongCatIsLooong I think this is a legitimate bug (as far as I can tell), and if it's real, then it's pretty glaring. I'm actually surprised that this issue isn't receiving more attention given how visible the issue is. Here is a widget tree that attempts to make both Material and Cupertino themes dark all the time. Notice in the screenshot that the Screenshot:
Maybe the issue is happening because I'm using a Also, the CC @xster for iOS insights Flutter version: |
|
@LongCatIsLooong @xster It also looks like the
|
|
umm, at a glance, I can't repro in the gallery on head.
I'll try your example. |
|
@xster if I recall correctly in |
|
ah right that's the issue. I can reproduce with cupertino nav bar in MaterialApps (though MaterialBasedCupertinoThemeData like Weiyu was saying). Though I still have the same question (perhaps a question for @willlarche) I had in the PR. Is there something in the Material color spec that more or less corresponds to the iOS's nav bar? We can't take Material's primaryColor since the iOS bar is more subdued. If we can't find any, perhaps we can just let it fallback to the Cupertino defaults for dark and light, or just flip the order here . But it would be nice to find something matching in the material theme. |
|
@xster in the case of dark mode, wouldn't the top nav bar match the bottom tab bar? If so, can we use whatever color the cupertino tab bar at the bottom is using? |
|
There's a similar problem with |
|
@xster So after looking into this again... The real issue here is that the default In order to fix this, every instance of CupertinoDynamicColor.resolve(CupertinoTheme.of(context).barBackgroundColor), context)Another potential issue is there's no elevated values set for Edit: Looking deeper, it seems like the Sliver nav bar already has a resolve within |
|
The issue still persists on stable 3.3 and master 3.7, Here are two code samples with their respective outputs. code sample 1import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theming',
theme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
cupertinoOverrideTheme: const CupertinoThemeData(
brightness: Brightness.dark,
),
),
home: const MyHomePage(title: 'HomePage' ,),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('Cupertino Theme'),
),
child: CupertinoTabScaffold(
tabBuilder: (context, index) {
return Container();
},
tabBar: CupertinoTabBar(
items: const [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.conversation_bubble),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.settings),
),
],
),
),
);
}
}
code sample 2import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
themeMode: ThemeMode.dark,
darkTheme: ThemeData(
cupertinoOverrideTheme: const CupertinoThemeData(
brightness: Brightness.dark,
),
appBarTheme: const AppBarTheme(
// color: Colors.black,
systemOverlayStyle: SystemUiOverlayStyle.light,
),
),
theme: ThemeData(
appBarTheme: const AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle.light,
),
),
home: const MyHomePage(title: 'Flutter Home'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: CupertinoNavigationBar(
middle: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
bottomNavigationBar: CupertinoTabBar(
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
label: 'AC',
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
label: 'Alarm',
),
],
),
);
}
}output
flutter doctor -v (mac) |
maheshj01
added
found in release: 3.3
|
Temporary Solution for others in case they just want something until this is resolved. You can still use your standard theming. The theming is "fine"(air quotes for a reason), like @cpboyd mentioned in his edit, the problem is downstream resolution where it assumes its already been resolved when there is a bug and it has not been resolved. For now you can override this on your CupertinoDynamicColor.resolve(CupertinoTheme.of(context).barBackgroundColor, context)This way you can fully rely on theming. If you are using Flutter Platform Widgets just use it like this: PlatformScaffold(
appBar: PlatformAppBar(
cupertino: (context, platform) => CupertinoNavigationBarData(
backgroundColor: CupertinoDynamicColor.resolve(CupertinoTheme.of(context).barBackgroundColor, context)),Hopefully this helps others quickly work around the problem. |
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-design
Steps to Reproduce
flutter create bug.Expected results:
If brightness is Light, the status bar icons should be black or viceversa. If brightness is Black, app bar should be black.
Actual results:
Only the CupertinoTabBar is updating if overriding, if not overriding but dark theme is on it works too but no the app bar.
Logs
Flutter Doctor
The text was updated successfully, but these errors were encountered: