I know I can create a customized theme with MaterialApp, but is it possible for me to use a word of my own instead of the reserved words?
For exemple:
MaterialApp(
title: title,
theme: ThemeData(
// Define the default brightness and colors.
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
// 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: TextTheme(
nameReview: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
textReview: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
dateReview: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
)
);
for when I see in the construction of my review widget the code becomes more readable
Related
I try to make an app theme for the text style. I get from the flutter docs this example.
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(
displayLarge: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
titleLarge: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyMedium: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
home: const MyHomePage(
title: appName,
),
);
and
Container(
color: Theme.of(context).colorScheme.secondary,
child: Text(
'Text with a background color',
style: Theme.of(context).textTheme.titleLarge,
),
),
I want to have the option to add multiple colors for the same text size. For example, the titleLarge can be red or white.
Adding color in the TextTheme->TextStyle only gives the option to add one color.
Is there a way for me to change it later in the Text widget? Maybe a way to override color from Theme.of(context).textTheme.titleLarge?
You can copy the theme, then give individual text styles like this
Theme.of(context).textTheme.apply(bodyColor: Colors.white).titleLarge
or you can also use copyWith using conditional ? like this
Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white)
or null check ! like this
Theme.of(context).textTheme.titleLarge!.copyWith(color: Colors.white)
You can override at the usage place with copyWith as following
Theme.of(context).textTheme.titleLarge!.copyWith(color: Colors.white)
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.
If I would like to set the style of a regular appbar title from the MaterialApp theme parameter, I would do the following:
ThemeData(appBarTheme: const AppBarTheme(
textTheme: TextTheme(
headline6: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w600,
fontSize: 37,
),
),
),
However, I can't seem to figure out how to do the same thing for a SliverAppBar. I am aware that you can simply set the style of the Text widget assigned to the title parameter within the SliverAppBar widget, but I'm trying to see if I can achieve the same result from the app's custom theme instead.
I have a ThemeData defined as follow:
class VendorThemeData {
static ThemeData get themeData {
return ThemeData(
primaryColor: Colors.purple,
accentColor: Colors.orange,
textTheme: ThemeData.light().textTheme.copyWith(
bodyText1: TextStyle(
color: Color.fromRGBO(20, 51, 51, 1),
),
bodyText2: TextStyle(
color: Color.fromRGBO(20, 51, 51, 1),
),
headline6: TextStyle(fontSize: 20),
),
);
}
}
And I will use the static get in my MaterialApp widget:
MaterialApp(
home: ...,
theme: isVendorMode ? VendorThemeData.themeData : ClientThemeData.themeData,
....)
My question is how do I have flutter change the text color based on the surrounding color? For example:
return Scaffold(
appBar: AppBar(
title: Text(
"Menu overview",
style: Theme.of(context).textTheme.headline6,
),
backgroundColor: Colors.blueGrey,
),
I am using the headline6 text theme here for the title text in my appbar, I can't change the text color if I want to use my custom theme, the only way is to declare it white in my ThemeData, but then all my other headline6 will have a white color.
If I want the "Menu Overview" text to have a white color to contrast the background, is it possible for flutter to detect this is automatically change the text color for me?
Can copyWith solve your problem? It can overwrite the property locally.
Theme.of(context).textTheme.headline6.copyWith(color: Colors.white),
I have a CupertinoApp and I would like to apply a custom TextStyle to all the screen/object of my app. For example I would lie to set a font family to all Text widget & Dialog widget and use that font across all my app. I was hoping to set it once in CupertinoThemeData or CupertinoTextThemeData but so far I did not have joy.
Note: I am able to set style for each Text however I would like to set it once for all
I've just run into this at the moment.
All I'm trying to do is colour text white, with general black backgrounds across the app (not font work).
The following has brought me some success:
return CupertinoApp(
theme: new CupertinoThemeData(
brightness: Brightness.dark,
primaryColor: CupertinoColors.dark,
barBackgroundColor: CupertinoColors.black,
scaffoldBackgroundColor: CupertinoColors.black,
textTheme: new CupertinoTextThemeData(
primaryColor: CupertinoColors.white,
brightness: Brightness.light,
textStyle: TextStyle(color: CupertinoColors.white),
// ... here I actually utilised all possible parameters in the constructor
// as you can see in the link underneath
),
),
// ...
)
Ref: CupertinoTextThemeData Constructor
I think you could extend my TextStyle(color: CupertinoColors.white) to apply fonts too. I intend to extract the TextStyle and ...ThemeData into separate classes to create a single place to edit them.
Hopefully this advances your position
Use this example of theme in your CupertinoApp .
theme: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
textStyle: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
backgroundColor: CupertinoColors.black)),
),
Reminder : For the colors, use a CupertinoColor instead of a simple
Color.
My code is here