Skip to content

Update TextTheme.button.letterSpacing from 0.75 to 1.25 per spec #59008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

HansMuller
Copy link
Contributor

@HansMuller HansMuller commented Jun 8, 2020

This is the last change needed to bring Flutter's Typography in line with the 2018 Material spec.

Fixes #38904

This change has a small impact on buttons' default width. The top button's letterSpacing has the new default value (1.25), the lower button has the original default value (0.75).

button_layout

It's easy enough to restore the original letterSpacing value for the TextTheme's button TextStyle by configuring the app's Theme.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  final ThemeData theme = ThemeData.from(colorScheme: ColorScheme.light());
  runApp(
    MaterialApp(
      theme: theme.copyWith(
        typography: Typography.material2018(platform: defaultTargetPlatform),
        // The following override reverts the default letterSpacing change
        textTheme: theme.textTheme.copyWith(
          button: theme.textTheme.button.copyWith(letterSpacing: 0.75),
        ),
      ),
      home: Home(),
    )
  );
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print(Theme.of(context).textTheme.button.letterSpacing);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            // Rendered with the default 2018 button letterSpacing change.
            RaisedButton(
              color: Theme.of(context).colorScheme.primary,
              textColor: Theme.of(context).colorScheme.onPrimary,
              onPressed: () { },
              child: Text(
                'BUTTON',
              ),
            ),
            // Rendered as it would be without the letterSpacing change.
            RaisedButton(
              onPressed: () { },
              color: Theme.of(context).colorScheme.primary,
              child: Text(
                'BUTTON',
                style: Theme.of(context).textTheme.button.copyWith(
                  letterSpacing: 0.75,
                  color: Theme.of(context).colorScheme.onPrimary,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

@fluttergithubbot fluttergithubbot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jun 8, 2020
Copy link
Contributor

@darrenaustin darrenaustin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

@fluttergithubbot fluttergithubbot merged commit 9c660c1 into flutter:master Jun 10, 2020
pennzht added a commit to pennzht/newfluttergallery that referenced this pull request Jun 12, 2020
pennzht added a commit to flutter/gallery that referenced this pull request Jun 12, 2020
guidezpl pushed a commit to flutter/gallery that referenced this pull request Jun 27, 2020
mingwandroid pushed a commit to mingwandroid/flutter that referenced this pull request Sep 6, 2020
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 30, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TextTheme docs on Material Design 2018 are wrong.
4 participants