Flutter assign Theme text style - flutter

Question

I was wondering is there is a better way to assign a certain default text style of my Theme to a Text widget than this approach.
Text(
'Hello world',
style: Theme.of(context).textTheme.headline1,
),
I did assume there should be something like a separate Widget or a Text Method Text.headline1 or simply a style Command style: TextStyle.headline1.
But seems I have to go through the Theme.of(context) to get this.
Does anyone have a better solution?

Answer 1

I think yon can't escape some boilerplate. For me this approach looks cleanest
import 'package:flutter/material.dart';
class StyledText extends StatelessWidget {
final String text;
late final TextStyle? Function(BuildContext context)? getStyle;
StyledText.headline1(this.text, {Key? key}) : super(key: key) {
getStyle = (context) {
return Theme.of(context).textTheme.headline1;
};
}
StyledText.headline2(this.text, {Key? key}) : super(key: key) {
getStyle = (context) {
return Theme.of(context).textTheme.headline2;
};
}
// ...
#override
Widget build(BuildContext context) {
return Text(text, style: getStyle?.call(context));
}
}
And use the widget like this
StyledText.headline1("Hello world");

Answer 2

Theme.of returns the ThemeData value specified for the nearest BuildContext ancestor. If you don't use it, then you won't be able to access the theme configuration you may set and benefit from its advantages.
However, you can create a class called Styles where you can access the pre-defined colors, text styles and more:
class Styles {
static const Color primaryColor = Colors.blue;
static const TextStyle headline1 = TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
);
static const TextStyle bodyText1 = TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.normal,
);
}
Here is an example of using it:
Text(
'Hello world',
style: Styles.headline1,
)

Answer 3

You define all Your Theme Style in Main like this
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
textTheme: TextTheme(
headline1: TextStyle(
color: const Color(0xFF232323),
fontSize: 26.sp,
fontWeight: FontWeight.w500,
fontFamily: "Mont Regular",
),
),
)
Then use like this
Text("A cloud-agnostic solution for Project and HR Management",
style: Theme.of(context).textTheme.headline1)

Answer 4

You can use TextStyle directly:
Text(
'Hello world',
style: TextStyle(color: Colors.black, fontSize: 15.0), // Etc...
),

Answer 5

Theme.of(context) is a great way to go for a variety of reasons, like switching between light and dark themes. I like to create a variable for the theme and text theme to keep things clean and efficient.
Widget build(BuildContext context) {
final theme = Theme.of(context);
final textTheme = theme.textTheme;
return Column(
children: [
Text('Heading Text', style: textTheme.headline1),
Text('Caption Text', style: textTheme.caption),
Text('Body text...', style: textTheme.bodyText1),
],
);
}