Skip to content

Fix chip label not vertically aligned when using sub themes. #279

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.

Sign up for GitHub

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix chip label not vertically aligned when using sub themes. #279

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
83c0c81
merge with the textTheme geometry
davidmartos96 Mar 15, 2025
64ba18a
Update docs
davidmartos96 May 14, 2025
3f23a60
Merge remote-tracking branch 'origin/master' into fix_spacing
davidmartos96 May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions lib/src/flex_color_scheme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,7 @@ class FlexColorScheme with Diagnosticable {
this.splashFactory,
this.platform,
this.typography,
this.scriptCategory = ScriptCategory.englishLike,
this.applyElevationOverlayColor = true,
this.cupertinoOverrideTheme,
this.subThemesData,
Expand Down Expand Up @@ -1123,6 +1124,18 @@ class FlexColorScheme with Diagnosticable {
/// compatibility reasons, you should use 2018 with M2.
final Typography? typography;

/// Defines the localized [TextStyle] geometry for [ThemeData.textTheme].
///
/// The [scriptCategory] defines the overall geometry of a [TextTheme] for
/// the [Typography.geometryThemeFor] method in terms of the
/// three language categories defined in https://material.io/go/design-typography.
///
/// Generally speaking, font sizes for [ScriptCategory.tall] and
/// [ScriptCategory.dense] scripts - for text styles that are smaller than the
/// title style - are one unit larger than they are for
/// [ScriptCategory.englishLike] scripts.
final ScriptCategory scriptCategory;

/// Apply a semi-transparent overlay color on Material surfaces to indicate
/// elevation for dark themes.
///
Expand Down Expand Up @@ -6612,6 +6625,9 @@ class FlexColorScheme with Diagnosticable {
}

final Typography effectiveTypography = typography ?? defaultTypography();
final TextTheme textThemeGeometry =
effectiveTypography.geometryThemeFor(scriptCategory);

// We need the text themes locally for the theming, so we must form them
// fully using the same process that the ThemeData() factory uses.
TextTheme defText =
Expand Down Expand Up @@ -6695,6 +6711,17 @@ class FlexColorScheme with Diagnosticable {
// always get correct contrast color to be used on primary color.
defPrimaryText = defPrimaryText.merge(pPrimTextTheme);

// Lastly, in order to correctly customize text styles based on the default
// TextTheme text styles, we need to use the typography geometry. This fixes
// text disalignment issues in chip labels for example.
// This is equivalent to what Flutter does under the hood in
// Theme.of(context) which calls [ThemeData.localize].
// Specifically, merging the geometry can use important text style
// properties like [leadingDistribution] and [textBaseline] that affect text
// rendering.
defText = textThemeGeometry.merge(defText);
defPrimaryText = textThemeGeometry.merge(defPrimaryText);

// TODO(rydmike): Commented as part of deprecation of blendTextTheme.
// Keeping it around for a while in case we can bring it back later.
//
Expand Down