AlertDialog.actions overrides ButtonTheme #38646
Comments
darrenaustin
added
f: material design
|
@darrenaustin I stumbled across your PR #37544. Does that fix this issue? |
|
I think so. It changes the default look of the ButtonBar to use the primary color instead of the secondary, so it should match the Material spec now. If you still want more control over the look of the buttons in AlertDialogs, you can now override their setting with the new ButtonBarTheme that you can set as part of your overall Theme that you set on your MaterialApp (see the last example in the PR description). I'm going to close this issue. If this PR didn't resolve your issue, please reopen or file another issue. Thanks! |
|
Right. What I was trying to focus on is that now you changed: children.add(
ButtonTheme.bar(
child: ButtonBar(children: actions),
)
);to: children.add(
ButtonBar(children: actions)
);which should respect the ambient |
|
@darrenaustin when will your PR make it to Flutter? Do you know what version it will be? |
|
@Levi-Lesches It went in commit: 9dce19e which is on master and entered the dev channel in v1.9.5. We don't have a specific timeline for when this will migrate to beta and then stable, but you can see the process at: https://github.com/flutter/flutter/wiki/Flutter-build-release-channels Which will also tell you how to switch to the dev channel if you just want to test it out to make sure it fixes your problem. |
|
This didn't fix the problem. The AlertDialog still defaults to standard colors, which is weird since I have it working in another place... Any advice? |
|
Never mind the first instance doesn't work. Can you re-open the issue? |
|
I am a little lost as to exactly what you are referring to. Can you provide an runnable example showing how it isn't working for you? I just tried the following and am not seeing a problem with the buttons in an AlertDialog picking up the import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.from(colorScheme: ColorScheme.light()).copyWith(
buttonTheme: ButtonThemeData(buttonColor: Colors.green),
),
darkTheme: ThemeData.from(colorScheme: ColorScheme.dark()),
home: Builder(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Alert Dialog'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Alert me!'),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Alert! Alert!'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('Like something happened.'),
],
),
),
actions: <Widget>[
RaisedButton(
child: Text('SURE'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
),
],
),
),
);
},
),
);
}
} |
darrenaustin
added
the
waiting for customer response
|
Sorry I still haven't had time to fully test this. I'm trying to rush a tight deadline, but I found something interesting here. I was making a companion app for my original app (an admin console which required access that normal users should not have/need), and while trying to make a dialog I noticed that the RaisedButton was the default color of blue (I hadn't overridden the theme yet), but so was the text! I had a FlatButton next to it and its text color was also that default blue, so I manually changed the RaisedButton's child text color to white, which solved the problem. Here is the code for that: void showError(BuildContext context) => showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text ("Login failed"),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text (
"Could not log into your account",
textScaleFactor: 1.5,
),
SizedBox(height: 10),
Text(
"A problem prevented you from logging in. "
"Please contact someone from IT for help."
)
],
),
actions: [
RaisedButton(
child: Text (
"Close",
style: TextStyle(color: Colors.white),
),
onPressed: Navigator.of(context).pop,
)
]
)
);(Note that I later got rid of the FlatButton)
the text and the button filling would both be blue. Again, apologies for not having time to test this out, I had to just quickly fix it and move on. I might have some time this week to figure this out some more. I'm particularly interested in |
no-response
bot
removed
the
waiting for customer response
|
Ok so I properly started a new project yadda yadda. Basically this code: import "package:flutter/material.dart";
const Color mySpecificBlue = Color(0xFF004B8D);
void main() => runApp(MainApp());
class MainApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: DialogPage(),
);
}
class DialogPage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.info),
onPressed: () => showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text ("This is a test"),
actions: [
RaisedButton(
child: Text ("OK"),
onPressed: () => Navigator.of(context).pop()
)
]
)
)
)
);
}
yields this: Giving the theme a new class MainApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: DialogPage(),
theme: ThemeData(
buttonColor: mySpecificBlue,
buttonTheme: ButtonThemeData(
buttonColor: mySpecificBlue,
)
)
);
}The only thing that seemed to work was giving class MainApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: DialogPage(),
theme: ThemeData(
buttonTheme: ButtonThemeData(
colorScheme: ColorScheme.light(
primary: mySpecificBlue,
onPrimary: Colors.white,
),
)
)
);
}which gives this: This reveals that the text color was indeed the default blue all along. Additionally, class MainApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: DialogPage(),
theme: ThemeData(
buttonTheme: ButtonThemeData(
colorScheme: ColorScheme.light(
primary: mySpecificBlue,
secondary: Colors.white,
),
)
)
);
}Which fixes it: This is also discussed at issue #22745, but nobody seems to be looking into it. If you look at my comments there one could think to set the text color to |
|
So to summarize, the problems are:
|
|
Any update on this? I would say it's a pretty big issue seeing as none of this is documented right now. |
|
Hey @darrenaustin, I found why your code works and mine doesnt:
ColorSchemes are documented as still being a process and not everyone (especially those who already finalized their theming before ColorSchemes were published) knows to use them. That's essentially what my tests above established. That no matter what changes I made to the theme, only adding |
|
Any updates on this? It's a pretty big issue IMO. |
|
Looks like this is being handled in #54776, which basically redoes the entire theming system to be more consistent, so I'll close it here (@HansMuller is that correct?). |
|
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 |
When making my app, I noticed the buttons in
AlertDialog.actionslooked a bit off -- they weren't conforming toMaterialApp.theme.buttonTheme.buttonColor. After checking the documentation, I found this underAlertDialog.build:Why does AlertDialog provide its own
ButtonThemeif it's not even going to give it an actual theme?A temporary workaround I found was using the ambient
ButtonTheme.colorScheme. So, if you want to make, say, aRaisedButtonwith the correct color, you could do:Output of
flutter doctor -v:The text was updated successfully, but these errors were encountered: