Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.8k stars 876 forks source link

[QUESTION] how to make image not inline? #1419

Open azeunkn0wn opened 6 months ago

azeunkn0wn commented 6 months ago

How do you make an img not inline?
I used ImageExtension() and wrap the image widget with GestureDetection to add onLongPressed I want the image to be at the bottom of the text or add a new line before the image.

image

Example code:

SelectionArea(
      child: Html(
        data: data,
        shrinkWrap: true,
        style: {
          "body": Style(
            padding: HtmlPaddings.zero,
            margin: Margins.zero,
            fontSize: FontSize(16),
          ),
          "p": Style(
            padding: HtmlPaddings.zero,
            margin: Margins.zero,
            fontSize: FontSize(16),
          ),
        },

        extensions: [
          ImageExtension(
            builder: (extensionContext) {
              final element = extensionContext.styledElement as ImageElement;

              return GestureDetector(
                onTap: (){
                  /// do stuff
                },
                onTap: (){
                  /// do other stuff
                },
                child: Image.network(
                  element.src,
                ),
              );
            },
          )
        ],
      ),
    );

PS: I have no HTML/CSS experience

gibahjoe commented 4 months ago

use the style map to set the display to block