Flutter Extension on Text Widget

Question

I am creating Text widget but I want all text widgets have same text style. For doing this I created extension for Text widget.

This is my code:

 extension TextExtension on Text {

   Text get appbarContentTitleWeb => this
  ..style?.copyWith(
  color: AppColorTheme.turquoise10,
  fontWeight: FontWeight.w500,
  fontSize: 48,
  height: 62.4,
  letterSpacing: -0.3,
  fontFamily: FontFamily.fedraSansTogg,
  overflow: TextOverflow.ellipsis
);

  Text get appbarContentSubtitleWeb => this
..style?.copyWith(
  color: AppColorTheme.turquoise10,
  fontWeight: FontWeight.w400,
  fontSize: 16,
  height: 24,
  fontFamily: FontFamily.fedraSansTogg,
  overflow: TextOverflow.ellipsis
);
}

I implemented this extensions to my widget like this:

Text("This is a text").appbarContentTitleWeb

But its not effected by Text extension. It returns default text style of Text widget. How can I solve this problem?

Answer 1

You can change the default text style in your main App Widget.

See the official document on https://docs.flutter.dev/cookbook/design/themes

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        fontFamily: FontFamily.fedraSansTogg,
        textTheme: TextTheme(
          displayLarge: const TextStyle(
            color: AppColorTheme.turquoise10,
            fontWeight: FontWeight.w500,
            fontSize: 48,
            height: 62.4,
            letterSpacing: -0.3,
            fontFamily: FontFamily.fedraSansTogg,
            overflow: TextOverflow.ellipsis,
          ),
          // ···
          titleLarge: TextStyle(), // Do something
          bodyMedium: TextStyle(), // DO something
          displaySmall: TextStyle(), // Do something
        ),
      ),
    );
  }
}