[flutter_markdown] Added sizedImageBuilder to Markdown widget

packages/flutter_markdown/CHANGELOG.md

@@ -1,3 +1,9 @@
+## NEXT
+
+## 0.8.0
+
+* Introduce `MarkdownImageConfig` for `sizedImageBuilder` builder.
+
 ## 0.7.5
 
 * Updates minimum supported SDK version to Flutter 3.22/Dart 3.4.

packages/flutter_markdown/lib/src/builder.dart

@@ -50,6 +50,33 @@ class _TableElement {
   final List<TableRow> rows = <TableRow>[];
 }
 
+/// Holds configuration data for an image in a Markdown document.
+class MarkdownImageConfig {
+
+  /// Creates a new [MarkdownImageConfig] instance.
+  MarkdownImageConfig({
+    required this.uri,
+    this.title,
+    this.alt,
+    this.width,
+    this.height,
+  });
+  /// The URI of the image.
+  final Uri uri;
+
+  /// The title of the image, displayed on hover.
+  final String? title;
+
+  /// The alternative text for the image, displayed if the image cannot be loaded.
+  final String? alt;
+
+  /// The desired width of the image.
+  final double? width;
+
+  /// The desired height of the image.
+  final double? height;
+}
+
 /// A collection of widgets that should be placed adjacent to (inline with)
 /// other inline elements in the same parent block.
 ///
@@ -106,6 +133,7 @@ class MarkdownBuilder implements md.NodeVisitor {
     required this.styleSheet,
     required this.imageDirectory,
     required this.imageBuilder,
+    required this.sizedImageBuilder,
     required this.checkboxBuilder,
     required this.bulletBuilder,
     required this.builders,
@@ -134,6 +162,9 @@ class MarkdownBuilder implements md.NodeVisitor {
   /// Call when build an image widget.
   final MarkdownImageBuilder? imageBuilder;
 
+  /// Call when build an image widget.
+  final MarkdownSizedImageBuilder? sizedImageBuilder;
+
   /// Call when build a checkbox widget.
   final MarkdownCheckboxBuilder? checkboxBuilder;
 
@@ -617,8 +648,9 @@ class MarkdownBuilder implements md.NodeVisitor {
     }
 
     Widget child;
-    if (imageBuilder != null) {
-      child = imageBuilder!(uri, title, alt);
+    if (imageBuilder != null || sizedImageBuilder != null) {
+      final MarkdownImageConfig config = MarkdownImageConfig(uri: uri, alt: alt, title: title, height: height, width: width);
+      child = sizedImageBuilder != null ? sizedImageBuilder!(config) : imageBuilder!(uri, alt, title);
     } else {
       child = kDefaultImageBuilder(uri, imageDirectory, width, height);
     }

packages/flutter_markdown/lib/src/widget.dart

@@ -32,6 +32,11 @@ typedef MarkdownOnSelectionChangedCallback = void Function(
 typedef MarkdownTapLinkCallback = void Function(
     String text, String? href, String title);
 
+/// Signature for custom image widget.
+///
+/// Used by [MarkdownWidget.sizedImageBuilder]
+typedef MarkdownSizedImageBuilder = Widget Function(MarkdownImageConfig config);
+
 /// Signature for custom image widget.
 ///
 /// Used by [MarkdownWidget.imageBuilder]
@@ -220,7 +225,8 @@ abstract class MarkdownWidget extends StatefulWidget {
     this.blockSyntaxes,
     this.inlineSyntaxes,
     this.extensionSet,
-    this.imageBuilder,
+    @Deprecated('Use sizedImageBuilder instead') this.imageBuilder,
+    this.sizedImageBuilder,
     this.checkboxBuilder,
     this.bulletBuilder,
     this.builders = const <String, MarkdownElementBuilder>{},
@@ -278,8 +284,12 @@ abstract class MarkdownWidget extends StatefulWidget {
   final md.ExtensionSet? extensionSet;
 
   /// Call when build an image widget.
+  @Deprecated('Use sizedImageBuilder instead')
   final MarkdownImageBuilder? imageBuilder;
 
+  /// Call when build an image widget.
+  final MarkdownSizedImageBuilder? sizedImageBuilder;
+
   /// Call when build a checkbox widget.
   final MarkdownCheckboxBuilder? checkboxBuilder;
 
@@ -391,6 +401,7 @@ class _MarkdownWidgetState extends State<MarkdownWidget>
       styleSheet: styleSheet,
       imageDirectory: widget.imageDirectory,
       imageBuilder: widget.imageBuilder,
+      sizedImageBuilder: widget.sizedImageBuilder,
       checkboxBuilder: widget.checkboxBuilder,
       bulletBuilder: widget.bulletBuilder,
       builders: widget.builders,
@@ -467,7 +478,8 @@ class MarkdownBody extends MarkdownWidget {
     super.blockSyntaxes,
     super.inlineSyntaxes,
     super.extensionSet,
-    super.imageBuilder,
+    @Deprecated('Use sizedImageBuilder instead.') super.imageBuilder,
+    super.sizedImageBuilder,
     super.checkboxBuilder,
     super.bulletBuilder,
     super.builders,
@@ -522,7 +534,8 @@ class Markdown extends MarkdownWidget {
     super.blockSyntaxes,
     super.inlineSyntaxes,
     super.extensionSet,
-    super.imageBuilder,
+    @Deprecated('Use sizedImageBuilder instead.') super.imageBuilder,
+    super.sizedImageBuilder,
     super.checkboxBuilder,
     super.bulletBuilder,
     super.builders,

packages/flutter_markdown/pubspec.yaml

@@ -4,7 +4,7 @@ description: A Markdown renderer for Flutter. Create rich text output,
   formatted with simple Markdown tags.
 repository: https://github.com/flutter/packages/tree/main/packages/flutter_markdown
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+flutter_markdown%22
-version: 0.7.5
+version: 0.8.0
 
 environment:
   sdk: ^3.4.0

packages/flutter_markdown/test/image_test.dart

@@ -459,5 +459,58 @@ void defineTests() {
       },
       skip: kIsWeb, // Goldens are platform-specific.
     );
+
+    testWidgets(
+      'custom image builder test width and height',
+      (WidgetTester tester) async {
+        const double height = 200;
+        const double width = 100;
+        const String data = '![alt](https://img.png#${width}x$height)';
+        Widget builder(MarkdownImageConfig config) =>
+            Image.asset('assets/logo.png', width: config.width, height: config.height);
+
+        await tester.pumpWidget(
+          boilerplate(
+            MaterialApp(
+              home: DefaultAssetBundle(
+                bundle: TestAssetBundle(),
+                child: Center(
+                  child: Container(
+                    color: Colors.white,
+                    width: 500,
+                    child: Markdown(
+                      data: data,
+                      sizedImageBuilder: builder,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+
+        final Iterable<Widget> widgets = tester.allWidgets;
+        final Image image =
+            widgets.firstWhere((Widget widget) => widget is Image) as Image;
+
+        expect(image.image.runtimeType, AssetImage);
+        expect((image.image as AssetImage).assetName, 'assets/logo.png');
+        expect(image.width, width);
+        expect(image.height, height);
+
+        await tester.runAsync(() async {
+          final Element element = tester.element(find.byType(Markdown));
+          await precacheImage(image.image, element);
+        });
+
+        await tester.pumpAndSettle();
+
+        await expectLater(
+            find.byType(Container),
+            matchesGoldenFile(
+                'assets/images/golden/image_test/custom_image_builder_test.png'));
+      },
+      skip: kIsWeb,
+    );
   });
 }