I'm not sure if this is a flutter issue, but whenever i change light/dark mode from control center, the theme does not change instantly. Only after dismissing the control center and resume back the app, then it will start to change. I have uploaded a gif to explain the issue.
If i compare to other apps like Reddit, the background will instantly change to dark after toggling dark mode in control center
For now im using the default material app theme
main.dart
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: AppTheme.lightTheme,
darkTheme: AppTheme.darkTheme,
home: HomeWidget()
);
}
AppTheme.dart
class AppTheme {
AppTheme._();
static final ThemeData lightTheme = ThemeData(
canvasColor: Colors.transparent,
scaffoldBackgroundColor: Colors.grey.shade100,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.black),
caption: TextStyle(color: Colors.grey.shade700),
headline6: TextStyle(color: Colors.black)
),
iconTheme: IconThemeData(
color: Colors.black
),
appBarTheme: AppBarTheme(brightness: Brightness.light),
brightness: Brightness.light
);
static final ThemeData darkTheme = ThemeData(
canvasColor: Colors.transparent,
scaffoldBackgroundColor: Color(0xff111215),
textTheme: TextTheme(
bodyText1: TextStyle(color: Color(0xffd0d2d4)),
caption: TextStyle(color: Color(0xff717579)),
headline6: TextStyle(color: Color(0xffd0d2d4))
),
iconTheme: IconThemeData(
color: Color(0xff9aa0a6)
),
appBarTheme: AppBarTheme(brightness: Brightness.light),
brightness: Brightness.light
);
}
Are you checking it in the debugging mode or release mode. If you are checking it in the debugging mode just check it in the release mode(debug mode renders a little slow).
Let me know if it works
Related
I've got this code snippet below trying to apply a title theme to my appBar and I am not quite sure I am understanding the copyWith function for the theme. My understanding would be that all properties of my theme are copied over, except those that I change. I am not changing appBarTheme when I use the copyWith, so why is it not applying to the app?
I've uncommented the line that does't work, and commented out the one that does.
class MyApp extends StatelessWidget {
final ThemeData theme = ThemeData(
primarySwatch: Colors.purple,
fontFamily: 'Quicksand',
// This doesn't work
appBarTheme: AppBarTheme(
titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 40)),
);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Personal Expenses',
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(secondary: Colors.amber),
// This does work
// appBarTheme: AppBarTheme(
// titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 40)),
),
home: MyHomePage(),
);
}
}
I am not changing appBarTheme when I use the copyWith, so why is it
not applying to the app?
What do you mean? If you want to simply apply your theme then all you have to do is this.
Essentially,
MaterialApp(
...
theme: theme
...
);
If you want to change the color of the AppBar, then you would want to do this.
Essentially,
MaterialApp(
...
theme: theme.copyWith(
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
),
...
);
This would allow you to change your AppBar color while leaving your AppBar's titleTextStyle as it is.
Please note that your code theme.colorScheme.copyWith(secondary: Colors.amber) will only set the secondary color, which will not be visible depending on how you setup your AppBar. I am not sure if you did this intentionally.
Finally, if you want to change the appBarTheme as well, then you would want to do this.
Essentially,
MaterialApp(
...
theme: theme.copyWith(
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
appBarTheme: const AppBarTheme(
titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 10),
),
),
...
);
Note that I only changed the font size from 40 to 10.
All these should work, and it should show very big differences in the UI. In other words, your code seems fine. I am not very sure why you think that it is "not applying to the app". Please clarify why you think so.
Your code looks fine, I tested and it's working fine
theme: theme.copyWith(
appBarTheme: AppBarTheme(color: Colors.redAccent,titleTextStyle: TextStyle(fontFamily: "Amiri", fontSize: 40))
change the App bar theme but for
theme.copyWith(
colorScheme: theme.colorScheme.copyWith(secondary: Colors.amber),
it change secondary color not App bar theme
Here is my code:
static final darkTheme = ThemeData(
textTheme: GoogleFonts.rubikTextTheme()
.apply(bodyColor: Color(0xFFf2f2f2), displayColor: Color(0xFFf2f2f2))
.copyWith(bodyText1: TextStyle(color: Colors.greenAccent)),
scaffoldBackgroundColor: Color(0xFF1f1f1f),
primaryColor: Color(0xFF474747),
colorScheme: ColorScheme.dark(
primaryContainer: Color(0xFF282828),
secondaryContainer: Color(0xFF3D3D3D)),
iconTheme: IconThemeData(color: Color(0xFFf2f2f2)),
primaryIconTheme: IconThemeData(color: Color(0xFFf2f2f2)),
hintColor: Color(0xFFf2f2f2),
backgroundColor: Color(0xFFd9d9d9),
dividerColor: Color(0xFFf2f2f2));
I want set multiple color in textTheme, but how do i know which TextStyle property should i use? in this case i have text said "open" and i want it to be greenAccent in dark mode and green in light mode, and here i use bodyText1, but the green color apply on other text instead on the "Open" text.
should i try every property from displayLarge until overline to find property colored which text. And im not sure if i use .copyWith the right way or not. even if i manage to find it using this method, i think it is wrong. i use the .apply to color most text in white
check it
MaterialApp(
title: appName,
theme: ThemeData(
// Define the default brightness and colors.
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
// Define the default font family.
fontFamily: 'Georgia',
// Define the default `TextTheme`. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: const TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
home: const MyHomePage(
title: appName,
),
);
Instead of using Text widget use RichText widget.It can make your life really easy.Just look up RichText.
I am new to flutter. I just created a theme file to define light and dark theme.When I defined light theme, the textTheme: property which is deprecated is not changing the text title color of app bar into black.
If I have to create or define textTheme or replace it ?? How should I do it ?
class MyTheme {
static ThemeData lightTheme(BuildContext context) => ThemeData(
primarySwatch: Colors.deepPurple,
fontFamily: GoogleFonts.lato().fontFamily,
appBarTheme: AppBarTheme(
color: Colors.white,
elevation: 0.0,
iconTheme: IconThemeData(color: Colors.black),
//------
textTheme: Theme.of(context).textTheme, // Problem is here
//------
));
static ThemeData darkTheme(BuildContext context) =>
ThemeData(brightness: Brightness.dark);
}
Change it to this
textTheme: Theme.of(context).appBarTheme.textTheme,
PS: It's deprecated. try to migrate.
Use toolbarTextStyle and titleTextStyle instead of using textTheme inside appBarTheme.
toolbarTextStyle:
Theme.of(context).appBarTheme.toolbarTextStyle?.copyWith(
color: Colors.amber,
///your config
),
titleTextStyle:
Theme.of(context).appBarTheme.titleTextStyle?.copyWith(
color: Colors.amber, ///your config
)
More about using theme.
I'm new to flutter and struggling to add font family in my code..already updated my pubspec.yamal with OpenSans fonts.. now how to add font family into this main. dart material app widget??
fontFamily: "OpenSans",
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(primary: Color(0xff075e54),secondary: Color(0xff128C7E),
),
),
home: Homescreen(key: null),
);
}
}
You can try this
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(primary: Color(0xff075e54),secondary: Color(0xff128C7E)),
textTheme: theme.textTheme.apply(fontFamily: "OpenSans"),
),
Create a simple file for the theme like the one I created theme_util.dart and use it as follows.
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: appTheme,
home: Homescreen(key: null),
);
theme_util.dart
ThemeData appTheme = ThemeData(
backgroundColor: appColor.white,
scaffoldBackgroundColor: appColor.white,
appBarTheme: AppBarTheme(
color: appColor.white,
brightness: Brightness.light,
textTheme: TextTheme().copyWith(headline6: titleStyle),
iconTheme: IconThemeData(color: appColor.primaryColor)),
fontFamily: 'Opensans',
primaryColor: appColor.primaryColor,
primaryColorDark: appColor.primaryDarkColor,
primaryColorLight: appColor.primaryLight,
accentColor: appColor.accentColor,
brightness: Brightness.light,
//primarySwatch: appColor.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
buttonTheme: ButtonThemeData(buttonColor: appColor.primaryColor),
);
You can create a style file in your dart folder and use the font where ever you want like this way-text_styles.dart
class TextStyles {
static TextStyle overline(
{required BuildContext context, required Color color}) {
return GoogleFonts.montserrat(
textStyle: Theme.of(context).textTheme.overline?.copyWith(color: color),
);
}
}
and use it as-
TextStyles.overline(context: context, color: theme.textColor).copyWith(fontWeight: FontWeight.w900),
Note:if you use custom font you have to install the package from your pubspec.yaml.Example-
google_fonts:
I tried changing the color of all my RaisedButtons from the themeData but it refused to work. All other properties, such as fontSize and fontWeight changed successfully. The color of the text only changes from black to white when the brightness property of themeData is changed to Brightness.dark.
Is there a way I can solve this issue? What could I be doing wrong?
Here is my sample code:
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primaryColor: Color(0XFF212845),
scaffoldBackgroundColor: Color(0XFF212845),
primarySwatch: Colors.yellow,
buttonColor: Color(0XFFF8D320),
textTheme: TextTheme(
button: TextStyle(
color: Colors.green, // This is not working.
fontSize: 30.0,
fontWeight: FontWeight.bold
)
)
),
home:MenuPage(),
);
For other people coming to this question, one reason that a button may not change colors is that it is disabled, which happens when you don't have the onPressed method set.
RaisedButton(
color: Theme.of(context).accentColor,
onPressed: () {}, // <-- need to add this
child: Text(...),
),
if you are giving a color to the color property and it doesn't show ,then probably you haven't implemented the onPressed property, because in this state the button will show it's disabled color , which is no color at all.
set it like this:
onPressed: () {},
giving it an anonymous function like that while not implementing anythig ( or something if you wish) will give it color
Add buttonTheme and accentColor to your ThemeData , like this:
ThemeData(
primaryColor: Color(0XFF212845),
scaffoldBackgroundColor: Color(0XFF212845),
primarySwatch: Colors.yellow,
buttonColor: Color(0XFFF8D320),
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.accent),
accentColor: Colors.green,
Even though primarySwatch might have been added, you still need to add buttonColor to add the color to the buttons, like this:
child: MaterialApp(
home: Wrapper(),
theme: ThemeData(
primarySwatch: Colors.blue,
buttonColor: Colors.blue // this is needed
),
),
primarySwatch - used to configure default values for several fields,
including: primaryColor, primaryColorBrightness, primaryColorLight,
primaryColorDark, toggleableActiveColor, accentColor, colorScheme,
secondaryHeaderColor, textSelectionColor, backgroundColor, and
buttonColor.
Also, make sure onPressed in your RaisedButton is set:
onPressed: () {},
Make sure you haven't customize the RaisedButton() itself, else it will override the ThemeData. If you have customized color property in RaisedButton it will override the properties set in ThemeData.
I believe the correct way is to declare a buttonColor property in your ThemeData Widget.
MaterialApp(
theme: ThemeData(
fontFamily: 'Pirata',
primaryColor: Color.fromRGBO(71, 86, 87, 1),
accentColor: Color.fromRGBO(71, 86, 87, 1),
buttonColor: Color.fromRGBO(238, 238, 238, 1),
),
home: App()))