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.79k stars 860 forks source link

Vertical Align <p> with inner <code> span #1241

Open dargoz opened 1 year ago

dargoz commented 1 year ago

How do I make this <p> content have the same height with <code> image

i want to make the text center so it will look like this : image

i use flutter_html: ^2.2.1

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.0, on Microsoft Windows [Version 10.0.22621.1413], locale en-ID)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.5.0)
[√] IntelliJ IDEA Community Edition (version 2022.3)
[√] VS Code (version 1.76.1)
[√] Connected device (3 available)
[√] HTTP Host Availability

is there anything I can do to achieve it? thanks.

Sub6Resources commented 1 year ago

What sort of styles do you have applied? That would give us a hint as to where the issue is.

dargoz commented 1 year ago

sorry for the late reply.., I use custom render to override the normal <code> style and create something like this: I already changes to TagExtension (3.0.0-beta1)

TagExtension(
          tagsToExtend: {"code"},
          builder: (extensionContext) {
            return CustomCodeRender(renderContext: extensionContext);
          },
        ),

and here's in the build method :

return Container(
          width: isMultiLine
              ? MediaQueryData.fromWindow(WidgetsBinding.instance.window)
                  .size
                  .width
              : null,
          padding: const EdgeInsets.all(2),
          decoration: BoxDecoration(
              color: const Color.fromARGB(255, 240, 240, 240),
              border: isMultiLine ? Border.all(color: Colors.grey) : null,
              borderRadius: const BorderRadius.all(Radius.circular(4))),
          child: Padding(
            padding: isMultiLine ? const EdgeInsets.all(8) : EdgeInsets.zero,
            child: Text(
              codeText,
              style: TextStyle(
                  fontSize: isMultiLine ? 14 : 12, fontFamily: 'JetBrainsMono'),
            ),
          ));

but I don't find anyway to make it center...

EArminjon commented 1 month ago

Hello, Did you find any solution ?

dargoz commented 1 month ago

nope, I'm currently working on something else and since it's just minor issue, i'm not using my time to troubeshoot it 😅