Add scalable font size support for buttons and split buttons based on size

This commit is contained in:
Emily Pauli 2025-10-23 10:40:05 +02:00
commit 1cb404b4df
3 changed files with 54 additions and 3 deletions

View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:m3e_design/m3e_design.dart';
import 'button_tokens_adapter.dart';
import 'enums.dart';
@ -130,7 +131,21 @@ class _ButtonM3EState extends State<ButtonM3E> {
}
Widget _buildContent(ButtonMeasurements m) {
final text = DefaultTextStyle.merge(child: widget.label);
final m3e = context.m3e;
final bfs = m3e.typography.buttonFontSize;
final double? fontSize = switch (widget.size) {
ButtonM3ESize.xs => bfs.xs,
ButtonM3ESize.sm => bfs.sm,
ButtonM3ESize.md => bfs.md,
ButtonM3ESize.lg => bfs.lg,
ButtonM3ESize.xl => bfs.xl,
};
final text = DefaultTextStyle.merge(
style: fontSize == null ? null : TextStyle(fontSize: fontSize),
child: widget.label,
);
if (widget.icon == null) return text;
return Row(
mainAxisSize: MainAxisSize.min,

View file

@ -128,3 +128,24 @@ class M3ETypography {
);
}
}
@immutable
class ButtonFontSize {
final double xs;
final double sm;
final double md;
final double lg;
final double xl;
const ButtonFontSize({
this.xs = 14,
this.sm = 14,
this.md = 16,
this.lg = 20,
this.xl = 24,
});
}
extension M3EButtonFontSizeExt on M3ETypography {
ButtonFontSize get buttonFontSize => const ButtonFontSize();
}

View file

@ -479,6 +479,16 @@ class _LeadingContent extends StatelessWidget {
final iconBlock = size.leadingIconBlockWidth;
final gap = size.gapIconToLabel;
// Scale label font-size with button size (xs/s unchanged).
final bfs = m3e.typography.buttonFontSize;
final double? labelFontSize = switch (size) {
SplitButtonM3ESize.xs => bfs.xs,
SplitButtonM3ESize.sm => bfs.sm,
SplitButtonM3ESize.md => bfs.md,
SplitButtonM3ESize.lg => bfs.lg,
SplitButtonM3ESize.xl => bfs.xl,
};
Widget content;
if (icon != null && (label?.isNotEmpty ?? false)) {
content = Padding(
@ -497,7 +507,10 @@ class _LeadingContent extends StatelessWidget {
child: Text(
label!,
overflow: TextOverflow.ellipsis,
style: m3e.typography.base.labelLarge?.copyWith(color: color),
style: m3e.typography.base.labelLarge?.copyWith(
color: color,
fontSize: labelFontSize,
),
),
),
],
@ -519,7 +532,9 @@ class _LeadingContent extends StatelessWidget {
child: Text(
label ?? '',
overflow: TextOverflow.ellipsis,
style: DefaultTextStyle.of(context).style.copyWith(color: color),
style: DefaultTextStyle.of(
context,
).style.copyWith(color: color, fontSize: labelFontSize),
),
);
}