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
Related
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 use a Scafold which has an app bar with grey background and black as text color. I want to have the status bar transparent and the text also black. Unfortunately the text color is white not matter what I've treid. After reading this post and this one, I've tried the code below, but the text color is still white.
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.black.withOpacity(0.0), // Color for Android
statusBarIconBrightness: Brightness.light,
statusBarBrightness: Brightness.light,
));
Update:
To make it more clear: In the emulator the bar looks like this which is fine:
On my phone the text color is white, so you can't see it:
To change the app bar theme, you can use appBarTheme property of ThemeData class and to change the text color of AppBar, you can use the textTheme property and set it as you want. The textstyle used for the text in AppBar is headline6, so you can do something like this.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
//here we are applying the theme to appbar.
appBarTheme: AppBarTheme(
color: Colors.black.withOpacity(0.0),
brightness: Brightness.dark,
),
//here we are setting the theme to the text
primaryTextTheme: TextTheme(
headline6: TextStyle(
color: Colors.black,
)),
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
You can check the below simple code.
Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(
backgroundColor: Colors.transparent,
title: Text(
"Demo",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),
body:....,)
is there a way to set whole app backgorundcolor in flutter. For example i want to use white background on all screens. so the first thing i do is manually setting background color to all screens. But i think its overkill. and i am looking for the a shortcut to achieve it.
i have tried below code but couldn't get achieve what i wanted.
#override
Widget build(BuildContext context) {
return BlocProvider<SplashBloc>(
bloc: splashBloc,
child: MaterialApp(
theme: new ThemeData(scaffoldBackgroundColor: Colors.white),
home: Splash(),
),
);
}
}
In main.dart, use,
MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white),
),
This will change the background color of the entire app provided you are returning Scaffold in the build Widget.
You use use the theme in your MaterialApp Widget to set up the theme colors for your entire app like so:
MaterialApp(
theme: ThemeData(
primaryIconTheme: IconThemeData(color: Colors.white),
primaryColor: Color.fromRGBO(254, 248, 248, 1),
appBarTheme: AppBarTheme(
color: <color_of_choice>,
),
),
Your backgroundColor will assume the primaryColor above.
Read all about it here.
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
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()))