`TextTheme.labelSmall` doesn't update letter spacing for text widget with `Typography.material2014`

[ronw98]

I defined my theme like this

ThemeData(
  fontFamily: 'Poppins',
  textTheme: const TextTheme(
    bodySmall: TextStyle(
      fontSize: 12,
      fontWeight: FontWeight.w400,
    ),
    labelSmall: TextStyle(
      fontSize: 12,
      fontWeight: FontWeight.w400,
    ),
  ),
)

bodySmall and labelSmall are equal.
Yet a Text with bodySmall and labelSmall display 2 different things. bodySmall text style behaves as expected but labelSmall does not use the right font family.

---

Full reproducible example

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: 'Poppins',
        textTheme: const TextTheme(
          bodySmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          labelSmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Font problem'),
        ),
        body: Builder(
          builder: (builderContext) {
            return Center(
              child: Column(
                children: [
                  Text(
                    'Body small',
                    style: Theme.of(builderContext).textTheme.bodySmall,
                  ),
                  Text(
                    'Label small',
                    style: Theme.of(builderContext).textTheme.labelSmall,
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

pubspec.yaml

name: issues
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: '>=2.19.2 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:

  uses-material-design: true

  fonts:
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins-Regular.ttf
        - asset: assets/fonts/Poppins-Light.ttf
          weight: 300
        - asset: assets/fonts/Poppins-Medium.ttf
          weight: 500
        - asset: assets/fonts/Poppins-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/Poppins-Bold.ttf
          weight: 700
        - asset: assets/fonts/Poppins-ExtraBold.ttf
          weight: 900

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.8, on macOS 13.2 22D49 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.74.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!

[TahaTesser]

This seems to be an issue with Typography.material2014().

If you switch to Material 3, it defaults to Typography.material2021() and the issue should be resolved or simply override ThemeData.typography to Typography.material2021() without migrating to Material 3.

Or you can override the just letterSpacing in the theme.

          labelSmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
            letterSpacing: 0.0,
          ),

Here I created a code that showcases the issue is only with labelSmall and when overriding ThemeData.typography, the issue is resolved.

code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        typography: Typography.material2014(),
        fontFamily: 'Poppins',
        textTheme: const TextTheme(
          displayLarge: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          displayMedium: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          displaySmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          headlineLarge: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          headlineMedium: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          headlineSmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          titleLarge: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          titleMedium: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          titleSmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          labelLarge: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          labelMedium: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          labelSmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          bodyLarge: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          bodyMedium: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          bodySmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Font problem'),
        ),
        body: Builder(
          builder: (BuildContext context) {
            return Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Display',
                      style: Theme.of(context).textTheme.displayLarge,
                    ),
                    Text(
                      'Display',
                      style: Theme.of(context).textTheme.displayMedium,
                    ),
                    Text(
                      'Display',
                      style: Theme.of(context).textTheme.displaySmall,
                    ),
                    Text(
                      'Headline',
                      style: Theme.of(context).textTheme.headlineLarge,
                    ),
                    Text(
                      'Headline',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                    Text(
                      'Headline',
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
                    Text(
                      'Title',
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                    Text(
                      'Title',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    Text(
                      'Title',
                      style: Theme.of(context).textTheme.titleSmall,
                    ),
                    Text(
                      'Label',
                      style: Theme.of(context).textTheme.labelLarge,
                    ),
                    Text(
                      'Label',
                      style: Theme.of(context).textTheme.labelMedium,
                    ),
                    Text(
                      'Label',
                      style: Theme.of(context).textTheme.labelSmall,
                    ),
                    Text(
                      'Body',
                      style: Theme.of(context).textTheme.bodyLarge,
                    ),
                    Text(
                      'Body',
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                    Text(
                      'Body',
                      style: Theme.of(context).textTheme.bodySmall,
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

[ronw98]

using Material3 works like a charm, thank you very much!

[HansMuller]

Pleased to see that upgrading to Material 3 helped. I'm going to close this issue.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.