Skip to content

[Web] fix Image fit when using ImgElementPlatformView #164400

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
+147 −3
Open

[Web] fix Image fit when using ImgElementPlatformView #164400

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80dbd98
[Web] fix Image fit with ImgElementPlatformView
GiacomoPignoni Feb 26, 2025
f05c1f8
add tests
GiacomoPignoni Mar 13, 2025
a5459d2
fixes
GiacomoPignoni Jul 1, 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
Next Next commit
[Web] fix Image fit with ImgElementPlatformView
  • Loading branch information
@GiacomoPignoni
GiacomoPignoni committed Jun 30, 2025
commit 80dbd984f6abe86aaed951104fb52ef63ecc1901
6 changes: 6 additions & 0 deletions packages/flutter/lib/src/web.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ extension type CSSStyleDeclaration._(JSObject _) implements JSObject {
external String get height;
external set width(String value);
external String get width;
@JS('object-fit')
external set objectFit(String value);
@JS('object-fit')
external String get objectFit;
}

extension type CSSStyleSheet._(JSObject _) implements JSObject {
Expand Down Expand Up @@ -144,3 +148,5 @@ extension type XMLHttpRequest._(JSObject _) implements XMLHttpRequestEventTarget
}

extension type XMLHttpRequestEventTarget._(JSObject _) implements EventTarget, JSObject {}

enum CSSObjectFit { fill, contain, cover, fitWidth, fitHeight, none, scaleDown }
32 changes: 29 additions & 3 deletions packages/flutter/lib/src/widgets/_web_image_web.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import 'platform_view.dart';
/// Displays an `<img>` element with `src` set to [src].
class ImgElementPlatformView extends StatelessWidget {
/// Creates a platform view backed with an `<img>` element.
ImgElementPlatformView(this.src, {super.key}) {
ImgElementPlatformView(this.src, {this.fit, super.key}) {
if (!_registered) {
_register();
}
Expand All @@ -39,21 +39,30 @@ class ImgElementPlatformView extends StatelessWidget {
// without fetching it over the network again.
final web.HTMLImageElement img = web.document.createElement('img') as web.HTMLImageElement;
img.src = paramsMap['src']! as String;
img.style.width = '100%';
img.style.height = '100%';
final String? fit = paramsMap['fit'] as String?;
if (fit != null) {
img.style.objectFit = fit;
}
return img;
});
}

/// The `src` URL for the `<img>` tag.
final String? src;

/// The `object-fit` CSS property for the `<img>` tag.
final web.CSSObjectFit? fit;
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you explain why the new type CSSObjectFit is needed? It seems to me that in an actual app, this type is only used for intermediate type passthrough: a BoxFit is converted to a CSSObjectFit, which is then converted to a string. Can we use BoxFit all the way until it's converted to a CSS string?


@override
Widget build(BuildContext context) {
if (src == null) {
return const SizedBox.expand();
}
return HtmlElementView(
viewType: _viewType,
creationParams: <String, String?>{'src': src},
creationParams: <String, String?>{'src': src, 'fit': fit?.name},
hitTestBehavior: PlatformViewHitTestBehavior.transparent,
);
}
Expand All @@ -72,7 +81,7 @@ class RawWebImage extends SingleChildRenderObjectWidget {
this.fit,
this.alignment = Alignment.center,
this.matchTextDirection = false,
}) : super(child: ImgElementPlatformView(image.htmlImage.src));
}) : super(child: ImgElementPlatformView(image.htmlImage.src, fit: fit?.cssObjectFit));

/// The underlying HTML element to be displayed.
final WebImageInfo image;
Expand Down Expand Up @@ -371,3 +380,20 @@ class RenderWebImage extends RenderShiftedBox {
);
}
}

extension on BoxFit {
Copy link
Contributor

Choose a reason for hiding this comment

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

Extensions are not something we allow in the framework, this is in the style guide here: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md#avoid-using-extension

Copy link
Contributor

Choose a reason for hiding this comment

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

Especially since this can easily be replaced by a global function. :)

web.CSSObjectFit get cssObjectFit {
switch (this) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Not enforced but the pattern matching statement is the fashion for you to consider:

  return switch(this) {
    BoxFit.fill => web.CSSObjectFit.fill,
    ...
  };

case BoxFit.contain:
Copy link
Contributor

Choose a reason for hiding this comment

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

Why are these values all mapped to cover? Shouldn't we at least map contain?

case BoxFit.cover:
case BoxFit.fitWidth:
case BoxFit.fitHeight:
case BoxFit.scaleDown:
return web.CSSObjectFit.cover;
case BoxFit.fill:
return web.CSSObjectFit.fill;
case BoxFit.none:
return web.CSSObjectFit.none;
}
}
}
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy