I have got redirected from https://github.com/flutter/flutter/issues/28138 to here.
Generally my problem is that I don´t think that FloatingActionButton backgroundColor and FlatButton text color are inherited from right values defined in ThemeData.
Create an app where you will use primary red color (appbar, button bg, card), yellow for accent (icons, appbar title), black for general text, white/light grey for backgrounds like scaffold body.
Set AppBar BG color to red using using theme (primaryColor)
Set AppBar title color to yellow using theme (accentColor)
Set color of icons to same color as accentColor, since if primary color is used they will be invisible in AppBar
Create a floatingActionButton with an icon.
Icon in floatingActionButton is not visible because backgroundColor for the widget uses the ThemeData.accentColor, which is yellow, instead of the ThemeData.primaryColor
Both foreground and background defaults to accentColor.
/// The color to use when filling the button.
///
/// Defaults to **[ThemeData.accentColor**] for the current theme.
final Color backgroundColor;
I found similar issue with FlatButton in Dialog, by default color of text is accent color, which is yellow (on white background), if i override it to primary, it´s red, but I don´t want to have it red since the delete button next to it is red. So I need to set it to normal, so it´s black which is correct, but:
flat_button.dart:127
textStyle: theme.textTheme.button.copyWith(color: buttonTheme.getTextColor(this)),
My theme:
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.normal,
buttonColor: primary, // Red
),
textTheme: TextTheme(
...
button: TextStyle(color: black), // Black
),
new FlatButton(
//textTheme: ButtonTextTheme.normal,
child: new Text("Ponechať"),
onPressed: () {
Navigator.of(context).pop();
onKeep();
},
)
In theory my FlatButton in the popup dialog should be black and or red. But it´s yellow the accent color.
To reproduce try to following example:
https://gist.github.com/erikkubica/45fc8acdce1f8a25cd5258e8b3a0e1f3
If you want the color of the floating button to be primary, add the following.
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
If you want to change the color of FlatButton in the dialog to black, add the following.
theme: ThemeData(
colorScheme: ColorScheme.light(
primary: primary,
secondary: Colors.black,
),
It may be better to instantiate it with ColorScheme() so that it does not affect other widgets.
Related
Have a look at the image below. I know we have a widget called ToolbarOptions, where you can specify the options. But how to change the style. And we can change the style easily on editable text. But this is the text field.
Would love any help.
For changing text selection color, you can use textSelectionTheme
cursorColor for the cursor line
selectionHandleColor for the bubble below the cursor
selectionColor for the highlight color
textSelectionTheme: _theme.textSelectionTheme.copyWith(
cursorColor: AppColors.purple,
selectionHandleColor: AppColors.purple,
selectionColor: AppColors.grey4,
),
For changing text toolbarOption style, you can use button textTheme
textTheme: _theme.textTheme
.copyWith(
button: _theme.textTheme.button?.copyWith(
//change it in this part
),
)
.apply(fontFamily: GoogleFonts.roboto().fontFamily),
I was following a YouTuber step by step creating this project but when I want to change the 'ThemeData primary colors' It just won't change and still remain the default color which is light blue. Here is a screenshot of it
According to AppBar description, it uses ColorScheme.primary by default.
The default app bar [backgroundColor] is the overall theme's
[ColorScheme.primary] if the overall theme's brightness is [Brightness.light]. Unfortunately this is the same as the default
[ButtonStyle.foregroundColor] for [TextButton] for light themes.
In this case a preferable text button foreground color is
[ColorScheme.onPrimary], a color that contrasts nicely with
[ColorScheme.primary]. to remedy the problem, override
[TextButton.style]:
try using colorScheme
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch(
primarySwatch: Colors.purple,
),
),
home: MyApp(),
),
And to use somewhere else
Theme.of(context).colorScheme.primary,
For more, visit ThemeData-class
I am working on a Flutter app where I am using a drawer. The drawer consists of various menu options using the ListTile class. The documentation specifies that when the 'selected' property of a ListTile is true then 'By default the selected color is the theme's primary color.' but it makes no mention of the text color. Whenever a ListTile is selected the corresponding text changes to blue, which goes against my theme. How do I set the text color for a selected ListTile?
Thanks.
You can apply theme to ListTile by wrapping it with ListTileTheme.
ListTileTheme(
selectedColor: Colors.red, // text & icon color
selectedTileColor: Colors.green, // background color
child: ListTile(
title: Text('cats')
)
)
How can I change the status bar color to white but also change the text color of status bar, otherwise both will be white and hence text wont be visible
You can use. You should put it in your main() method.
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white
));
Then set your AppBar brightness to
AppBar(
brightness: Brightness.light,
),
I have a Flutter app, where on the appBar, I have added a dropdown button. My app supports primary / secondary color changing.
The screenshot below shows an appBar for two different primary colors.
As you can see, the Flutter is able to decide what color to use for app bar text to keep proper readability - white for dark color and black for light color (second app bar).
I would like to set dropdown items' text color identical for the one, used by Flutter app bar text, hence, I would like to retrieve it.
Looking at Theme.of(context) properties, however, didn't give me a clue what color should I use to achieve what I need to.
Below is the code snippet:
final ThemeData _theme = Theme.of(context);
final int index = values.indexWhere((TimeSpan element) => element.value == initialValue.value);
return Theme(
data: _theme.copyWith(
canvasColor: _theme.primaryColor,
brightness: Brightness.dark,
),
child: DropdownButtonHideUnderline(
child: DropdownButton<TimeSpan>(
items: values
.map(
(value) => DropdownMenuItem(
child: Text(
value.toString(),
style: TextStyle(color: _theme.colorScheme.surface),
),
value: value,
),
)
.toList(),
onChanged: callback,
isExpanded: false,
value: values[index],
),
),
);
After a couple of days working with light / dark theme brightness, I figure out, a (possible) solution for the above case.
You can get the desired text color via one of the existing text themes, for instance Theme.of(context).primaryTextTheme.title.color returns color adjusted to current theme brightness.
Flutter renders the widget based on the final theme values it has.
So for example if the child widget has a different theme and the parent widget has a different theme, Flutter's rendering engine will first give preference to the child widget's theme over the parent widget's theme.
So DropdownButton has a theme hardcoded by default which cannot be directly changed as the widget does not accept any parameter to change the theme of the underlying widget(s) and as a result the Theme of the parent widget won't change/alter the theme of DropdownButton. That's the reason why the text Week remains black in both the cases.
If you really want to change the theme you can either alter the source code of DropDownButton or make a custom widget for it. However, simply hardcoding the values for text-color should still do the work.
In order to change the Appbar's text color you will have to manually change the text color as the parent theme suggests that the text color should be white whereas you want it to be black(as per your requirements).
Scaffold(
appBar: AppBar(
title: Text("Weight Overview",color: Colors.black)
)
[...]
)
On OP's request,
You can manually change the Theme of your children at any point of your Widget tree by using the Theme widget and providing it with a theme.
Solution code:
Scaffold(
appBar: AppBar(
title: Theme(
theme: ThemeData(primaryColor: Colors.black),
child: Text("Weight Overview",),
),
),
[...]
)