flutter_html icon indicating copy to clipboard operation
flutter_html copied to clipboard

[QUESTION] how to make image not inline?

Open azeunkn0wn opened this issue 1 year ago • 1 comments

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

azeunkn0wn avatar May 04 '24 01:05 azeunkn0wn

use the style map to set the display to block

gibahjoe avatar Jul 03 '24 20:07 gibahjoe