I modified textTheme theme data on my application :
ThemeData get lightTheme => ThemeData(
disabledColor: AppColors.disabled,
scaffoldBackgroundColor: AppColors.paper,
textTheme: TextTheme(
button: AppTextStyles.button,
overline: AppTextStyles.overline,
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppSize.s32),
),
),
backgroundColor: MaterialStateProperty.resolveWith(
(final states) => states.contains(MaterialState.disabled)
? 50.gray
: 500.primary,
),
),
),
I Used this code too but not worked:
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppSize.s32),
),
),
backgroundColor: MaterialStateProperty.resolveWith(
(final states) => states.contains(MaterialState.disabled)
? 50.gray
: 500.primary,
),
textStyle: MaterialStateProperty.resolveWith(
(final states) {
return const TextStyle(color: Color(0xFF661F1F));
},
),
),
),
This is AppTextStyles.button,:
static final TextStyle _base = GoogleFonts.inder(
color: Colors.black,
fontWeight: FontWeight.w600,
);
static final button = _base.copyWith(
fontSize: 16.sp, fontWeight: FontWeight.w700, color: Colors.black);
But when I added ElevatedButton the text color is still white?
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.access_alarm),
label: Text("Sign in")),
This is my material:
GetMaterialApp(
theme: AppThemes().lightTheme,
Use the foregroundColor property of the ButtonStyle.
foregroundColor: MaterialStateProperty.all(Colors.black)
try change color in foregroundColor inside ButtonStyle.
foregroundColor: MaterialStateProperty.resolveWith(
(final states) => states.contains(MaterialState.disabled)
? Colors.grey
: Color(0xFF661F1F),
Related
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'),
)),
In my Flutter app the user can define a custom Theme by picking the colors from color pickers. After that they can save the ThemeData to a list and use it. The problem is that after the app restarts the ThemeData added by the user disappers. How can I store these ThemeData-s into the list to remain even after the app restarts?
Here is my code:
The ThemeData list:
I also have two ThemeData which is added by default.
List<ThemeData> toReturnTheme = <ThemeData>[];
List<ThemeData> getThemes() {
ThemeData szikraTheme = ThemeData(
scaffoldBackgroundColor: Color(0xff5a89ba),
backgroundColor: Color(0xff5a89b0),
buttonColor: Color(0xfff78848),
accentColor: Colors.white,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff3a89ba),
),
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.white, fontFamily: 'Muli')));
ThemeData cobotTheme = ThemeData(
scaffoldBackgroundColor: Color(0xff207ABB),
backgroundColor: Color(0xff207ABB),
buttonColor: Color(0xfff78848),
accentColor: Colors.white,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff3a89ba),
),
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.white, fontFamily: 'Muli')));
toReturnTheme.add(szikraTheme);
toReturnTheme.add(cobotTheme);
return toReturnTheme;
}
void addToThemeList(ThemeData theme){
toReturnTheme.add(theme);
}
The Button that adds the new ThemeData to the list:
Padding(
padding: const EdgeInsets.all(8.0),
child: TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Theme.of(context).accentColor,
)),
onPressed: () {
try {
ThemeData customTheme = ThemeData(
scaffoldBackgroundColor:
Color(bckgrndColor!.value),
backgroundColor: Color(bckgrndColor!.value),
buttonColor: Color(buttonColor!.value),
accentColor: Color(fontColor!.value),
floatingActionButtonTheme:
FloatingActionButtonThemeData(
backgroundColor: Color(arrowColor!.value),
),
textTheme: TextTheme(
bodyText2: TextStyle(
color: Color(fontColor!.value),
fontFamily: 'Muli'),
bodyText1: TextStyle(
color: Color(fontColor!.value),
fontFamily:
customThemeController.text)));
customThemeController.clear();
addToThemeList(customTheme);
saveTheme();
final snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
content: Text(
"themeCreated".tr().toString(),
));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
} catch (e) {
final snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
backgroundColor: Colors.redAccent,
content: Text(
"chooseValidColors".tr().toString(),
));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
}
setState(() {});
},
child: Text(
"createNewTheme".tr().toString(),
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 25.0,
),
)),
),
And the ListView that displays the list of ThemeData:
Container(
width: MediaQuery.of(context).size.width / 2,
height: 100,
child: ListView.builder(
shrinkWrap: true,
itemCount: toReturnTheme.length,
itemBuilder: (context, int index) {
if (index < 2) {
return Container();
} else {
return Container(
child: Column(
children: [
ListTile(
title: GestureDetector(
child: Text(
toReturnTheme[index]
.textTheme
.bodyText1!
.fontFamily
.toString() ==
""
? "Custom Theme"
: toReturnTheme[index]
.textTheme
.bodyText1!
.fontFamily
.toString(),
style: TextStyle(
fontSize: 22.0,
color: Theme.of(context)
.accentColor),
),
onTap: () {
getThemeManager(context)
.selectThemeAtIndex(index);
},
),
trailing: GestureDetector(
child: Icon(
Icons.delete,
color: Theme.of(context).accentColor,
),
onTap: () {
toReturnTheme.removeAt(index);
setState(() {});
},
),
leading: Icon(
Icons.palette_outlined,
color: Theme.of(context).accentColor,
),
),
],
),
);
}
}),
),
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 am trying to create custom theme data something like this.
class CustomTheme {
static ThemeData get lightTheme {
return ThemeData(
textTheme: TextTheme(
headline1: h1.copyWith(color: Color(0xff444444)),
headline2: h2.copyWith(color: Color(0xff444444)),
headline3: h3.copyWith(color: Color(0xff444444)),
headline4: h4.copyWith(color: Color(0xff444444)),
headline5: h5.copyWith(color: Color(0xff444444)),
headline6: h6.copyWith(color: Color(0xff444444)),
subtitle1: TextStyle(color: Color(0xff444444)),
subtitle2: TextStyle(color: Color(0xff444444)),
bodyText1: TextStyle(color: Color(0xff444444)),
bodyText2: TextStyle(color: Color(0xff444444)),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(color: kButtonBorderColor)),
backgroundColor: kButtonBackgroundColor,
),
),
);
}
static ThemeData get darkTheme {
return ThemeData(
textTheme: TextTheme(
headline1: h1.copyWith(color: Color(0xffebebeb)),
headline2: h2.copyWith(color: Color(0xffebebeb)),
headline3: h3.copyWith(color: Color(0xffebebeb)),
headline4: h4.copyWith(color: Color(0xffebebeb)),
headline5: h5.copyWith(color: Color(0xffebebeb)),
headline6: h6.copyWith(color: Color(0xffebebeb)),
subtitle1: TextStyle(color: Color(0xffebebeb)),
subtitle2: TextStyle(color: Color(0xffebebeb)),
bodyText1: TextStyle(color: Color(0xffebebeb)),
bodyText2: TextStyle(color: Color(0xffebebeb)),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(color: kButtonBorderColor)),
backgroundColor: kButtonBackgroundColorDark,
),
),
);
}
}
My requirement is, I have two different button styles(2 for each light and dark mode) as shown below.
As you can see from my code, I can only give one background colour for my button style for a light and dark theme. I cannot set an additional textbuttontheme in the theme data. How can I set these 2 button styles inside my theme data? or is there any other method to handle 2 different styles for both light and dark theme?
You can't do that. As you have seen by yourself already the ThemeData class only has 1 property for each type of button theme. My advice for you would be to create a custom widget for your button using the TextButtonTheme widget to override the default theme and the Theme.of(context).brightness to define if you are on light or dark mode.
Here is a code sample that could help you:
class MyStyledButton extends StatelessWidget {
final Widget child;
final VoidCallback? onPressed;
MyStyledButton({
required this.child,
required this.onPressed,
});
#override
Widget build(BuildContext context) {
final currentTheme = Theme.of(context);
final isDarkTheme = currentTheme.brightness == Brightness.dark;
return TextButtonTheme(
data: TextButtonThemeData(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
backgroundColor: isDarkTheme ? Color(0xffebebeb) : Color(0xff444444),
),
),
child: TextButton(
child: child,
onPressed: onPressed,
),
);
}
}
How can you change the Purple selection color, Purple border color, time text color and Hour and Minute color from the input time picker widget, can't seem to find the properties in TimePickerThemeData
showTimePicker(
context: context,
initialTime: TimeOfDay(hour: 10, minute: 47),
builder: (context, child) {
return Theme(
data: ThemeData.light().copyWith(
colorScheme: ColorScheme.light(
// change the border color
primary: Colors.red,
// change the text color
onSurface: Colors.purple,
),
// button colors
buttonTheme: ButtonThemeData(
colorScheme: ColorScheme.light(
primary: Colors.green,
),
),
),
child: child,
);
},
);
Result:
You are able to use states on your theme too! Controlling the styles when making some action (like selected or focused actions).
Here an example:
final theme = ThemeData.light().copyWith(
timePickerTheme: TimePickerThemeData(
backgroundColor: Colors.green.shade200,
hourMinuteColor: MaterialStateColor.resolveWith((states) =>
states.contains(MaterialState.selected)
? Colors.blue.withOpacity(0.2)
: Colors.orange),
hourMinuteTextColor: MaterialStateColor.resolveWith((states) =>
states.contains(MaterialState.selected)
? Colors.pink
: Colors.deepPurple),
dialHandColor: Colors.pink.shade800,
dialBackgroundColor: Colors.purple.withOpacity(0.5),
dialTextColor: MaterialStateColor.resolveWith((states) =>
states.contains(MaterialState.selected)
? Colors.green
: Colors.black),
entryModeIconColor: Colors.yellow
),
textTheme: TextTheme(
overline: TextStyle(
color: Colors.red,
),
),
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
backgroundColor: MaterialStateColor.resolveWith((states) => Colors.black),
foregroundColor: MaterialStateColor.resolveWith((states) => Colors.green),
overlayColor: MaterialStateColor.resolveWith((states) => Colors.pink),
)));