so I would like to define my buttonstyles globally so that I can access them all at once.
I have enabled this for TextStyle like this:
abstract class ThemeText {
static const TextStyle exampleStyle= TextStyle(
fontFamily: 'Montserrat',
color: Colors.black,
fontSize: 40,
height: 0.5,
fontWeight: FontWeight.w600);
}
and when I access it in my text like this:
child: TextButton(
onPressed: (){},
child: Text("Test",
style: ThemeText.progressHeader,),
)
It works like a charm.
Now I want to do the same with my ButtonStyle:
TextButton(
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.green[900],
textStyle: TextStyle(fontSize: 18, fontStyle: FontStyle.italic)),
child: Text("Test!"),
)
However if I try the same, it doesn't matter how I write it, I always get the
message "const variables must be initialized with a constant value". How do I format this for buttons so that it works just like the TextStyle?
Thank you very much in advance!
Related
I am implementing a showcase widget but I want to place the widget on top of the text. How can I achieve this?
This is the code:
Showcase(
key: keys,
overlayOpacity: 0,
overlayColor: Colors.transparent,
title: "New!",
titleTextStyle: TextStyle(fontSize: 12),
shapeBorder: const CircleBorder(),
showcaseBackgroundColor: Color(0xfffcecaf),
descTextStyle:
const TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
description: "Tap to Learn more",
child: Container(
child: Text(
"xyz",
style: TextStyle(
fontSize: 20,
height: 1.2,
color: AppColors.PRIMARY_COLOR,
),
),
),
),
I have an OutlineButton where I try to use a google font for the text using the google-fonts dependency. The code looks like that:
OutlinedButton(
child: const Text('Next'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith((states) {
return colorPrimaryButton;
}),
textStyle: MaterialStateProperty.resolveWith((states) {
return GoogleFonts.inter(textStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white));
})
),
onPressed: () {
// do something
}),
Although I assigned white as the text color, the text appears blue-ish.
What am I missing here? Why wouldn't the "Next" text appear in white?
Don't need to change button textStyle just change child textSytle
OutlinedButton(
child: Text(
'Next',
style: GoogleFonts.inter(
textStyle: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith((states) {
return Colors.indigo;
}),
),
onPressed: () {
// do something
})
Preview
Using Flutter, I set ElevatedButton theme in the style.dart with this.
ThemeData appTheme(BuildContext context) {
const fontFamilyFallBack = ['Lexend', 'NotoSans'];
return ThemeData(
primaryColor: Colors.white,
backgroundColor: Colors.white,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.green,
onPrimary: Colors.white,
),
),
textTheme: const TextTheme(
headline1: TextStyle(
fontFamilyFallback: fontFamilyFallBack,
),
subtitle1: TextStyle(
fontFamilyFallback: fontFamilyFallBack,
fontSize: 20,
),
bodyText1: TextStyle(
fontFamilyFallback: fontFamilyFallBack,
fontSize: 14,
),
),
);
}
But still the color of the foreground which is my text still does not change to White as the value of onPrimary whereas the color of the background is appliable.
ElevatedButton(
child: Text(
'Tap go to second page',
style: Theme.of(context).textTheme.bodyText1,
),
onPressed: () => context.router.pushNamed('/error'),
)),
I have also tried ButtonStyle one, but I still get the same result.
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
),
),
You pass ButtonStyle to the style property like this:
ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
),
),
try this
ElevatedButton(
child: Text(
'Tap go to second page',
style:
Theme.of(context).textTheme.bodyText1.copyWith(color:Colors.green),
),
onPressed: () => context.router.pushNamed('/error'),
)),
I am using ThemeData to style text inside my buttons. Setting font family and even text size works perfectly, but the text colour is not applied for some reason. It works if I manually apply the given TextStyle in my code, but that's not how it should work, no?
Of course, I am setting my ThemeData in my Application class. I emphasize that some data from TextButtonThemeData and ElevatedButtonThemeData work, but the text colour not...
Like that it applies textSize and other's but NOT textColour:
TextButton(
onPressed: () {},
child: const Text('TAP HERE'),
)
And only like that the colour is correctly applied:
TextButton(
onPressed: () {},
child: const Text('TAP HERE', style: TextStyles.textButton),
)
My ThemeData:
final applicationTheme = ThemeData(
fontFamily: 'Raleway',
primarySwatch: MyColors.primary,
appBarTheme: AppBarTheme(
backgroundColor: MyColors.primary.shade900,
toolbarTextStyle: TextStyles.appBar,
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: MyColors.primary.shade900,
textStyle: TextStyles.elevatedButton,
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
textStyle: TextStyles.textButton,
shadowColor: MyColors.primary.shade500,
),
),
);
My TextStyles:
static final textButton = TextStyle(
color: MyColors.primary.shade500,
fontSize: 14,
fontWeight: FontWeight.w500,
letterSpacing: 1.25,
);
static const elevatedButton = TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w500,
letterSpacing: 0.25,
);
I have a PopupMenuButton with nested PopupMenuItems, each of them in turn have a nested Text. One of PopupMenuItems can be enabled/disabled which is controlled by the corresponding property and is displayed accordingly (with bright/pale color).
Widget popupMenu(SharedPreferences prefs) {
final themeManager = Provider.of<ThemeManager>(context);
return PopupMenuButton(
onSelected: (selected) {
switch (selected) {
case MenuItems.switchTheme:
themeManager.switchTheme();
prefs.setBool(
describeEnum(Prefs.manuallySetDark),
themeManager.isThemeDark()
);
break;
case MenuItems.autoSwitchTheme:
prefs.setBool(
describeEnum(Prefs.manuallySetDark),
null
);
themeManager.updateTheme(null, _model.isDarkTimeOfDay);
break;
}
},
itemBuilder: (BuildContext context) =>
[
PopupMenuItem(
value: MenuItems.switchTheme,
child: Text('Switch color scheme'),
),
PopupMenuItem(
value: MenuItems.autoSwitchTheme,
child: Text('Auto-switch color scheme'),
enabled: prefs.getBool(describeEnum(Prefs.manuallySetDark)) != null,
),
],
);
}
So far so good. But with the following theme, subtitle1 style is applied to the Text in PopupMenuItems which is not what I'd like to see there.
final darkTheme = ThemeData(
brightness: Brightness.dark,
appBarTheme: AppBarTheme(color: Colors.grey[800]),
textTheme: TextTheme(
subtitle1: TextStyle(color: Colors.indigo[800], fontSize: 22, fontWeight: FontWeight.bold),
bodyText2: TextStyle(color: Colors.indigo, fontSize: 16),
caption: TextStyle(color: Colors.indigo, fontSize: 16),
button: TextStyle(color: Colors.white, fontSize: 16),
),
If I override the style for the Text it is displayed with the correct style but it no longer respects the enabled property.
PopupMenuItem(
value: MenuItems.switchTheme,
child: Text('Auto-switch color scheme', style: Theme.of(context).textTheme.button),
enabled: prefs.getBool(describeEnum(Prefs.manuallySetDark)) != null,
),
Isn't it something expected? Is it worth an issue on github?
It turns out PopupMenuItem has a textStyle property saying:
The text style of the popup menu item.
If this property is null, then PopupMenuThemeData.textStyle is used. If PopupMenuThemeData.textStyle is also null, then ThemeData.textTheme.subtitle1 is used.
So the following theme works as expected without modifying the code which builds the PopupMenuItems:
final darkTheme = ThemeData(
brightness: Brightness.dark,
appBarTheme: AppBarTheme(color: Colors.grey[800]),
textTheme: TextTheme(
subtitle1: TextStyle(color: Colors.indigo[800], fontSize: 22, fontWeight: FontWeight.bold),
bodyText2: TextStyle(color: Colors.indigo, fontSize: 16),
caption: TextStyle(color: Colors.indigo, fontSize: 16),
button: TextStyle(color: Colors.white, fontSize: 16),
),
// addition:
popupMenuTheme: PopupMenuThemeData(
color: Colors.grey[800],
textStyle: TextStyle(color: Colors.white, fontSize: 16),
),
);