[flutter_markdown]: Unable to use MarkdownElementBuilder to act on img tag

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

run sample code:

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:markdown/markdown.dart' as md;

const String _data = '''
## sample Text![](https://static.max-c.com/static/heybox-chat/cubeEmoticons/上学-丧.png "small")

![](https://static.max-c.com/static/heybox-chat/cubeEmoticons/上学-丧.png "small")

###### ※ ※ ※

''';

void main() {
  runApp(
    MaterialApp(
      title: 'Markdown Demos',
      home: TestPage(),
    ),
  );
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ImgBuilderDemo"),
      ),
      body: Center(
        child: ImgBuilderDemo(),
      ),
    );
  }
}

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

  Future<String> get data => Future<String>.value(_data);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: data,
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return Markdown(
            data: snapshot.data!,
            builders: <String, MarkdownElementBuilder>{
              'img': ImgBuilder(),
            },
          );
        } else {
          return const CircularProgressIndicator();
        }
      },
    );
  }
}

class ImgBuilder extends MarkdownElementBuilder {
  @override
  Widget? visitElementAfter(md.Element element, TextStyle? preferredStyle) {
    return Text("test", style: preferredStyle);
  }
}

Expected results

Replace all img in raw data with widget built in ImgBuilder:

class ImgBuilder extends MarkdownElementBuilder {
  @override
  Widget? visitElementAfter(md.Element element, TextStyle? preferredStyle) {
    return Text("test", style: preferredStyle);
  }
}

Actual results

get error:

======== Exception caught by widgets library =======================================================
The following RangeError was thrown building FutureBuilder<String>(state: _FutureBuilderState<String>#5f8b8):
RangeError (index): Invalid value: Valid value range is empty: 0

The relevant error-causing widget was: 
  FutureBuilder<String> FutureBuilder:file:///Users/yangjiakang/Code/packages/packages/flutter_markdown/example/lib/main.dart:104:12
When the exception was thrown, this was the stack: 
#0      List._setIndexed (dart:core-patch/growable_array.dart:273:49)
#1      List.[]= (dart:core-patch/growable_array.dart:268:5)
#2      MarkdownBuilder.visitElementAfter (package:flutter_markdown/src/builder.dart:468:27)
#3      Element.accept (package:markdown/src/ast.dart:53:15)
#4      Element.accept (package:markdown/src/ast.dart:50:17)
#5      MarkdownBuilder.build (package:flutter_markdown/src/builder.dart:187:12)
#6      _MarkdownWidgetState._parseMarkdown (package:flutter_markdown/src/widget.dart:341:25)
#7      _MarkdownWidgetState.didChangeDependencies (package:flutter_markdown/src/widget.dart:285:5)

Code sample

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:markdown/markdown.dart' as md;

const String _data = '''
## sample Text![](https://static.max-c.com/static/heybox-chat/cubeEmoticons/上学-丧.png "small")

![](https://static.max-c.com/static/heybox-chat/cubeEmoticons/上学-丧.png "small")

###### ※ ※ ※

''';

void main() {
  runApp(
    MaterialApp(
      title: 'Markdown Demos',
      home: TestPage(),
    ),
  );
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ImgBuilderDemo"),
      ),
      body: Center(
        child: ImgBuilderDemo(),
      ),
    );
  }
}

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

  Future<String> get data => Future<String>.value(_data);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: data,
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return Markdown(
            data: snapshot.data!,
            builders: <String, MarkdownElementBuilder>{
              'img': ImgBuilder(),
            },
          );
        } else {
          return const CircularProgressIndicator();
        }
      },
    );
  }
}

class ImgBuilder extends MarkdownElementBuilder {
  @override
  Widget? visitElementAfter(md.Element element, TextStyle? preferredStyle) {
    return Text("test", style: preferredStyle);
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

======== Exception caught by widgets library =======================================================
The following RangeError was thrown building FutureBuilder<String>(state: _FutureBuilderState<String>#5f8b8):
RangeError (index): Invalid value: Valid value range is empty: 0

The relevant error-causing widget was: 
  FutureBuilder<String> FutureBuilder:file:///Users/yangjiakang/Code/packages/packages/flutter_markdown/example/lib/main.dart:104:12
When the exception was thrown, this was the stack: 
#0      List._setIndexed (dart:core-patch/growable_array.dart:273:49)
#1      List.[]= (dart:core-patch/growable_array.dart:268:5)
#2      MarkdownBuilder.visitElementAfter (package:flutter_markdown/src/builder.dart:468:27)
#3      Element.accept (package:markdown/src/ast.dart:53:15)
#4      Element.accept (package:markdown/src/ast.dart:50:17)
#5      MarkdownBuilder.build (package:flutter_markdown/src/builder.dart:187:12)
#6      _MarkdownWidgetState._parseMarkdown (package:flutter_markdown/src/widget.dart:341:25)
#7      _MarkdownWidgetState.didChangeDependencies (package:flutter_markdown/src/widget.dart:285:5)

Flutter Doctor output

Doctor output

[!] Flutter (Channel unknown, 3.11.0-2.0.pre.51, on macOS 13.0.1 22A400
    darwin-arm64, locale zh-Hans-CN)
    ! Flutter version 3.11.0-2.0.pre.51 on channel unknown at
      /Users/yangjiakang/flutter/framework
      Currently on an unknown channel. Run `flutter channel` to switch to an
      official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions
      at https://flutter.dev/docs/get-started/install.
    ! Unknown upstream repository.
      Reinstall Flutter by following instructions at
      https://flutter.dev/docs/get-started/install.
    • Framework revision 7c356d047d (4 天前), 2023-05-06 12:22:11 +0800
    • Engine revision 876968833e
    • Dart version 3.1.0 (build 3.1.0-82.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/yangjiakang/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • ANDROID_HOME = /Users/yangjiakang/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/yangjiakang/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      17.0.4.1+0-17.0.4.1b469.62-9127311)

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      11.0.15+0-b2043.56-8887301)

[✓] Android Studio
    • Android Studio at
      /Users/yangjiakang/Code/androidx/studio/android-studio-2022.2.1.7-mac_arm/
      Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      17.0.4.1+0-17.0.4.1b469.62-9127311)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.78.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[!] Proxy Configuration
    • HTTP_PROXY is set
    • NO_PROXY is localhost,127.0.0.1
    • NO_PROXY contains localhost
    • NO_PROXY contains 127.0.0.1
    ! NO_PROXY does not contain ::1

[✓] Connected device (3 available)
    • PERM00 (mobile) • XOCAQ87LIR597TEA • android-arm64  • Android 12 (API 31)
    • macOS (desktop) • macos            • darwin-arm64   • macOS 13.0.1 22A400
      darwin-arm64
    • Chrome (web)    • chrome           • web-javascript • Google Chrome
      113.0.5672.92

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

Thanks for the report and PR. Reproduced this issue on the latest version flutter_markdown: ^0.6.14. The stack trace is not really the same but it seems to mention the same cause (also based on your PR fix).

Logs

======== Exception caught by widgets library =======================================================
The following IndexError was thrown building FutureBuilder<String>(state: _FutureBuilderState<String>#66b64):
RangeError (index): Index out of range: no indices are valid: 0

The relevant error-causing widget was: 
  FutureBuilder<String> FutureBuilder:file:///Users/huynq/Documents/NEVERCODE.IO/RepoduceProjects/reproduce_issues_2/lib/markdown_126402.dart:44:12
When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49  throw_
dart-sdk/lib/_internal/js_dev_runtime/private/js_array.dart 600:7             _set]
packages/flutter_markdown/src/builder.dart 457:18                             visitElementAfter
packages/markdown/src/ast.dart 53:14                                          accept
packages/markdown/src/ast.dart 50:16                                          accept
packages/flutter_markdown/src/builder.dart 184:11                             build
packages/flutter_markdown/src/widget.dart 340:24                              [_parseMarkdown]
packages/flutter_markdown/src/widget.dart 284:5                               didChangeDependencies
packages/flutter/src/widgets/framework.dart 5237:11                           [_firstBuild]
packages/flutter/src/widgets/framework.dart 5062:5                            mount
packages/flutter/src/widgets/framework.dart 3971:15                           inflateWidget
packages/flutter/src/widgets/framework.dart 3702:20                           updateChild
packages/flutter/src/widgets/framework.dart 5111:16                           performRebuild
packages/flutter/src/widgets/framework.dart 5251:11                           performRebuild
packages/flutter/src/widgets/framework.dart 4805:7                            rebuild
packages/flutter/src/widgets/framework.dart 2780:18                           buildScope
packages/flutter/src/widgets/binding.dart 916:9                               drawFrame
packages/flutter/src/rendering/binding.dart 358:5                             [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1290:15                           [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1220:9                            handleDrawFrame
packages/flutter/src/scheduler/binding.dart 945:7                             <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19       internalCallback
====================================================================================================

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.7.12, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.7.12 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4d9e56e694 (2 days ago), 2023-04-17 21:47:46 -0400
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.77.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.62.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 13 (API 33)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 112.0.5615.137

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[!] Flutter (Channel master, 3.11.0-2.0.pre.73, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.11.0-2.0.pre.73 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8c5a1ea728 (7 hours ago), 2023-05-08 14:00:20 -0700
    • Engine revision 8d3a8162b3
    • Dart version 3.1.0 (build 3.1.0-86.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.62.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.137

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Getting same error as well when trying to replace checkbox with custom checkbox.

@stuartmorgan

Getting same error as well when trying to replace checkbox with custom checkbox.↳

flutter/packages#3952 @stuartmorgan Is there any problem with this PR?

[flutter_markdown] Unable to use MarkdownElementBuilder to act those …

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

[flutter_markdown] Unable to use MarkdownElementBuilder to act those …

Navigation Menu

Repository navigation

[flutter_markdown]: Unable to use MarkdownElementBuilder to act on img tag #126402

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[flutter_markdown]: Unable to use MarkdownElementBuilder to act on img tag #126402

Description

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

huycozy commented on May 10, 2023

MuhammedKpln commented on May 27, 2023

MeandNi commented on May 29, 2023

github-actions commented on Jun 14, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions