Flutter Question posted in
The official Flutter documentation can be found here.

Flutter TextTheme: which Texttheme property applies to which widgets?

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!

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    there is no need of theme here if you cant write then also flutter work for dark and light theme use any state Management show that it will work fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search