The bullet text has bigger font size on some devices

[zjamshidi]

I show the API output using markdown_widget. It works fine except the bullet texts are bigger than the normal paragraph texts on some iPhones. I cannot reproduce it myself, but I have screenshots on their phone.

Expected behavior
I would be happy even if I can set the list config text style.

Screenshot

Environment(please complete the following information):
Please use flutter doctor -v to show your flutter environment, and add your markdown_widget version too

Platform
iOS

Source data

return Directionality(
      textDirection:
          Bidi.hasAnyRtl(text) ? ui.TextDirection.rtl : ui.TextDirection.ltr,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: MarkdownGenerator(
          generators: [ttsHighlightGenerator],
          inlineSyntaxList: [TTSHighlightSyntax()],
        ).buildWidgets(
          text,
          config: MarkdownConfig(
            configs: [
              PConfig(
                textStyle: TextStyle(
                  fontSize: 16,
                  height: 1.6,
                  color: Theme.of(context).brightness == Brightness.dark
                      ? Colors.grey[300] // Lighter grey for dark mode
                      : Colors.grey[800], // Darker grey for light mode
                ),
              ),
              H1Config(
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  color: Theme.of(context).brightness == Brightness.dark
                      ? Colors.white // White for dark mode
                      : Colors.black, // Black for light mode
                ),
              ),
              H2Config(
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.w600,
                  color: Theme.of(context).brightness == Brightness.dark
                      ? Colors.white // White for dark mode
                      : Colors.black, // Black for light mode
                ),
              ),
              H3Config(
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                  color: Theme.of(context).brightness == Brightness.dark
                      ? Colors.white // White for dark mode
                      : Colors.black, // Black for light mode
                ),
              ),
            ],
          ),
        ),
      ),
    );

[deba33]

I have the same issue in android. This only happens when the "text and display size" is other than default setting.

[deba33]

I found a workaround. Wrap the MarkdownWidget with MediaQuery and set the data of MediaQuery to MediaQuery.of(context).copyWith(textScaler: const TextScaler.linear(1.0)),.
Example

MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaler: const TextScaler.linear(1.0)),,
  child: MarkdownWidget(
    data: yourMarkdownData,
    config: CustomMdConfig(...),
  ),
)

and to respect device settings text and display size create customConfig

class CustomMdConfig extends MarkdownConfig {
  final void Function(String href) onTapLink;
  final BuildContext context;
  CustomMdConfig(this.onTapLink, this.context);

// Add this
  TextScaler get textScaler => MediaQuery.of(context).textScaler; 

  @override
  ImgConfig get img => ImgConfig(
    builder: (url, attributes) {
      return Center(child: Image.network(url));
    },
  );

  @override
  HeadingConfig get h1 => H1Config(
      style: TextStyle(

// apply the textscaler
        fontSize: textScaler.scale(24),
        fontWeight: FontWeight.w900,
        color: Colors.red,
        wordSpacing: 4,
        letterSpacing: 1.5,
      ),
);

  @override
  HeadingConfig get h2 => H2Config(
    style: TextStyle(
      fontSize: textScaler.scale(20),
      fontWeight: FontWeight.w800,
      color: Colors.deepPurple,
      wordSpacing: 3,
      letterSpacing: 1.15,
    ),
  );

  @override
  HeadingConfig get h3 => H3Config(
    style: TextStyle(
      fontSize: textScaler.scale(18),
      fontWeight: FontWeight.w700,
      color: Colors.teal,
      wordSpacing: 2,
      letterSpacing: 1,
    ),
  );

  @override
  HeadingConfig get h4 => H4Config(
    style: TextStyle(
      fontSize: textScaler.scale(16),
      fontWeight: FontWeight.w600,
      color: Colors.pink,
    ),
  );

  @override
  PConfig get p =>
      PConfig(textStyle: TextStyle(fontSize: textScaler.scale(16)));

  @override
  BlockquoteConfig get blockquote {
    return BlockquoteConfig(
      sideWith: 0,
      sideColor: Colors.transparent,
      margin: EdgeInsets.zero,
      textColor:
          Theme.of(context).brightness == Brightness.dark
              ? Colors.white70
              : Colors.black87,
    );
  }

  @override
  LinkConfig get a => LinkConfig(
    style: TextStyle(
      fontSize: textScaler.scale(14),
      color: Colors.blue,
      decoration: TextDecoration.underline,
    ),
    onTap: (href) {
      onTapLink(href);
    },
  );
  @override
  CodeConfig get code =>
      CodeConfig(style: TextStyle(fontSize: textScaler.scale(14)));
}

[zjamshidi]

I also confirm it's happening when the text size settings have changed. I will try the workaround and report the result

[zjamshidi]

The hack seems to be working:

Before: (Bullet text size is bigger than the normal text)

After:

The text scaling setting is also respected:

Thanks @deba33