Skip to content
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

max-width attribute and auto-margins on network images for Flutter 3.10 #1359

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion lib/src/builtins/image_builtin.dart
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ class ImageBuiltIn extends HtmlExtension {
element.src,
width: imageStyle.width?.value,
height: imageStyle.height?.value,
fit: BoxFit.fill,
fit: BoxFit.contain,
headers: networkHeaders,
errorBuilder: (ctx, error, stackTrace) {
return Text(
Expand Down
26 changes: 25 additions & 1 deletion lib/src/css_box_widget.dart
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@
final padding = style.padding?.resolve(direction);

return _CSSBoxRenderer(
width: style.width ?? Width.auto(),
width:
_calculateMaxedWidth(context, style) ?? style.width ?? Width.auto(),
height: style.height ?? Height.auto(),
paddingSize: padding?.collapsedSize ?? Size.zero,
borderSize: style.border?.dimensions.collapsedSize ?? Size.zero,
Expand Down Expand Up @@ -90,6 +91,29 @@
);
}

/// Returns the width capped with maxWidth if necessary.
static Width? _calculateMaxedWidth(BuildContext context, Style style) {
// We only need to calculate something if we have a width and it needs to be capped.
if (style.maxWidth == null || style.width == null) return null;

// If our max is a percentage, we want to look at the size available and not be bigger than that.
// TODO In the else case, we should have something to compare across different units, as for now some cases won't be handled.
if (style.maxWidth!.unit == Unit.percent && style.width!.unit == Unit.px) {
return Width(
MediaQuery.of(context).size.width * (style.maxWidth!.value / 100),
style.width!.unit,

Check warning on line 104 in lib/src/css_box_widget.dart

View check run for this annotation

Codecov / codecov/patch

lib/src/css_box_widget.dart#L101-L104

Added lines #L101 - L104 were not covered by tests
);
} else if (style.width!.unit == style.maxWidth!.unit &&
style.width!.value > style.maxWidth!.value) {
return Width(
style.maxWidth!.value,
style.maxWidth!.unit,

Check warning on line 110 in lib/src/css_box_widget.dart

View check run for this annotation

Codecov / codecov/patch

lib/src/css_box_widget.dart#L106-L110

Added lines #L106 - L110 were not covered by tests
);
} else {
return null;
}
}

/// Takes a list of InlineSpan children and generates a Text.rich Widget
/// containing those children.
static Widget _generateWidgetChild(List<InlineSpan> children, Style style) {
Expand Down
6 changes: 6 additions & 0 deletions lib/src/css_parser.dart
Original file line number Diff line number Diff line change
Expand Up @@ -654,6 +654,10 @@
style.width =
ExpressionMapping.expressionToWidth(value.first) ?? style.width;
break;
case 'max-width':
style.maxWidth = ExpressionMapping.expressionToWidth(value.first) ??
style.maxWidth;

Check warning on line 659 in lib/src/css_parser.dart

View check run for this annotation

Codecov / codecov/patch

lib/src/css_parser.dart#L657-L659

Added lines #L657 - L659 were not covered by tests
break;
}
}
});
Expand Down Expand Up @@ -1228,6 +1232,8 @@
double.parse(value.text.replaceAll(RegExp(r'\s+(\d+\.\d+)\s+'), ''));
Unit unit = _unitMap(value.unit);
return LengthOrPercent(number, unit);
} else if (value is css.PercentageTerm) {
return LengthOrPercent(double.parse(value.text), Unit.percent);

Check warning on line 1236 in lib/src/css_parser.dart

View check run for this annotation

Codecov / codecov/patch

lib/src/css_parser.dart#L1235-L1236

Added lines #L1235 - L1236 were not covered by tests
}

//Ignore un-parsable input
Expand Down
10 changes: 10 additions & 0 deletions lib/src/style.dart
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,12 @@ class Style {
/// Default: Width.auto()
Width? width;

/// CSS attribute "`max-width`"
///
/// Inherited: no,
/// Default: null
Width? maxWidth;

/// CSS attribute "`word-spacing`"
///
/// Inherited: yes,
Expand Down Expand Up @@ -261,6 +267,7 @@ class Style {
this.verticalAlign = VerticalAlign.baseline,
this.whiteSpace,
this.width,
this.maxWidth,
this.wordSpacing,
this.before,
this.after,
Expand Down Expand Up @@ -353,6 +360,7 @@ class Style {
verticalAlign: other.verticalAlign,
whiteSpace: other.whiteSpace,
width: other.width,
maxWidth: other.maxWidth,
wordSpacing: other.wordSpacing,
before: other.before,
after: other.after,
Expand Down Expand Up @@ -438,6 +446,7 @@ class Style {
VerticalAlign? verticalAlign,
WhiteSpace? whiteSpace,
Width? width,
Width? maxWidth,
double? wordSpacing,
String? before,
String? after,
Expand Down Expand Up @@ -481,6 +490,7 @@ class Style {
verticalAlign: verticalAlign ?? this.verticalAlign,
whiteSpace: whiteSpace ?? this.whiteSpace,
width: width ?? this.width,
maxWidth: maxWidth ?? this.maxWidth,
wordSpacing: wordSpacing ?? this.wordSpacing,
before: beforeAfterNull == true ? null : before ?? this.before,
after: beforeAfterNull == true ? null : after ?? this.after,
Expand Down