Skip to content

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

Open
davidmartos96 wants to merge 3 commits into
rydmike:masterfrom
davidmartos96:fix_spacing
Open

Fix chip label not vertically aligned when using sub themes.#279
davidmartos96 wants to merge 3 commits into
rydmike:masterfrom
davidmartos96:fix_spacing

Conversation

@davidmartos96

@davidmartos96 davidmartos96 commented Mar 15, 2025

Copy link
Copy Markdown

Fixes #305

Hello!
After upgrading to v8 I noticed that text chips were not aligned vertically.
After investigation it turned out to be that the following text style wasn't using the leadingDistribution as .even and textBaseline as .alphabetic.

final TextStyle baseLabelStyle = (labelStyle ?? const TextStyle()).copyWith(

Those properties come from the typography text theme geometry, and Flutter applies those styles when doing Theme.of(context), and inside ThemeData.localize is called.
The englishLike textTheme in the typography contains those properties.

The fix I propose is basically doing the same TextStyle.merge that Flutter does when calling Theme.of(context).

Theme.of(context)
https://github.com/flutter/flutter/blob/f6ff1529fd6d8af5f706051d9251ac9231c83407/packages/flutter/lib/src/material/theme.dart#L139

ThemeData.localize
https://github.com/flutter/flutter/blob/f6ff1529fd6d8af5f706051d9251ac9231c83407/packages/flutter/lib/src/material/theme_data.dart#L1763-L1766

To reproduce the issue you can try the following code with and without subThemesData. Hot reload won't work here, you need to hot restart to see the actual difference.

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

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

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

  @override
  Widget build(BuildContext context) {
    final theme = FlexThemeData.dark(
      scheme: FlexScheme.mandyRed,
      typography: Typography.material2021(),
      subThemesData: FlexSubThemesData(),
    );

    return MaterialApp(title: 'Flutter Demo', theme: theme, home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            InputChip(
              avatar: Icon(Icons.emoji_emotions_rounded),
              onPressed: () {},
              label: ColoredBox(color: Colors.red, child: Text('My Chip')),
            ),
          ],
        ),
      ),
    );
  }
}

Before

image

After

This also automatically fixes the chip label fontWeight not using w500, which was forgotten in the copyWith linked above.
image

@davidmartos96

Copy link
Copy Markdown
Author

@rydmike Hello Mike!
Just wondering if you had a chance to look at this? Or if it was hidden in your notifications.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chip label not vertically aligned when using sub themes

1 participant