6

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?

5 Answers 5

8

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");
  
2

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),
    ],
  );
}
1
  • Thanks, Jared, i also considered the creation of a variable. Its however still the same approach involving the context and if not globally defined, would be still required in every class you might want to use it.
    – Bliv_Dev
    Commented Aug 26, 2021 at 7:59
1

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)
0

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,
)
1
  • This would require defining an additional style for an already existing Parameter n the defined theme and therefore would create an additional maintenance effort if I would like to swap Themes.
    – Bliv_Dev
    Commented Aug 26, 2021 at 7:54
0

You can use TextStyle directly:

Text(
 'Hello world',
  style: TextStyle(color: Colors.black, fontSize: 15.0), // Etc...
),
1
  • 1
    Hi Boris, this does not reflect my intentions of maybe swapping themes. Bu thanks for your reply .
    – Bliv_Dev
    Commented Aug 26, 2021 at 7:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.