I am fairly new to flutter, and was messing around with the theme data, specifically the TextTheme. I was reading up on theme on the official docs here and the TextTheme docs here.
When I was trying to change the different font sizes and styles, I wasn't sure which TextTheme properties affected which widgets. Only through listing all of the properties (from displayLarge to bodySmall) did I figure out which property affects which widgets automatically.
I wanted to ask is there a cheat sheet on this? Or is there just something I have missed in the documentation.
My code in my main.dart files looks like this:
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Recording Insights',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
textTheme: const TextTheme(
displayLarge: TextStyle(fontSize: 57),
headlineLarge: TextStyle(fontSize: 32),
titleLarge: TextStyle(fontSize: 42), //Affects appbar
labelLarge: TextStyle(fontSize:26), //Affects buttons
labelMedium: TextStyle(fontSize: 24),
labelSmall: TextStyle(fontSize: 22),
bodyLarge: TextStyle(fontSize: 22), //Affects list text
bodyMedium: TextStyle(fontSize: 20), //Affects the audio player text
bodySmall: TextStyle(fontSize: 18)
)
),
home: const MyHomePage(title: 'Recording Insights'),
);
}
}
For example, even though I am not passing theme to a different file called page1.dart
, the button and appbar text sizes are still affected.
A similar question was asked before here, but didn't really answer my question.
Any advice is appreciated, thank you!
Let's say you create a theme as follows
var dartTheme = ThemeData.dark().copyWith(
textTheme: TextTheme(
titleLarge: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w400,
fontSize: 16.0,
),
titleMedium: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 14.0,
),
),
);
You will then pass these values to your top-level MaterialApp
widget.
However, this does not start applying styles immediately, since flutter does not know which Text widget should have titleLarge
and which one should be titleMedium
.
In order to apply these styles, you must use them in your text widgets.
For example, if you have a widget responsible for displaying a heading,
@override
Widget build(BuildContext context) {
return Text(
'Heading Text',
style: Theme.of(context).textTheme.titleLarge,
);
}
You might encounter some scenarios where you need some styles from the theme, and some customs ones (like font color).
@override
Widget build(BuildContext context) {
return Text(
'Heading Text',
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: Colors.green,
),
);
}
Note the !
after titleLarge