[flutter_markdown] Ordered number list uses SizedBox for bullet number, but doesn't scale text to fit properly

[gazreese]

Migrated from flutter/flutter#81749
This issue was originally filed against the official flutter_markdown package.
The package has since been discontinued and ownership transferred to flutter_markdown_plus.

---

Internal: b/291644799

else if (tag == 'li') {
        if (_listIndents.isNotEmpty) {
          if (element.children.length == 0) {
            element.children.add(md.Text(''));
          }
          Widget bullet;
          dynamic el = element.children[0];
          if (el is md.Element && el.attributes['type'] == 'checkbox') {
            bool val = el.attributes['checked'] != 'false';
            bullet = _buildCheckbox(val);
          } else {
            bullet = _buildBullet(_listIndents.last);
          }
          // See flutter/flutter_markdown#147 and flutter/flutter_markdown#169
          child = Row(
            textBaseline: TextBaseline.alphabetic,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(
                width: styleSheet.listIndent,
                child: bullet
              ),
              Expanded(child: child)
            ],
          );
        }
      }

This creates a SizedBox with the listIndent for the width of the box, however if the font causes one of the numbers to be slightly larger than the allotted size, the period overflows to the next line.

If the numbered list ends up causing double digits, this can also cause an issue.

Finally, if the font is scaled on the system, this will end up looking very bad too.

Using a FittedBox around the bullet widget would fix this so that at least the numbers and periods stay on one line and always fit in the given size, though it could look weird to have a much smaller number compared to the rest, when that happens. But I think it would still be better than the current behavior.

This is without the FittedBox

This is with the FittedBox

[gazreese]

@TahaTesser commented on 2021-09-02T14:23:10Z (migrated from flutter/flutter#81749)

---

Hi @dannyvalentesonos
Thanks for filing the issue

I'm unable to reproduce the issue with the following

const String _data = '''
# Minimal Markdown Test
1. A minimal example of how to use the Markdown A minimal 
example of how to use the Markdown
2. A minimal example of how to use the Markdown A minimal
 example of how to use the Markdown
3. A minimal example of how to use the Markdown A minimal 
example of how to use the Markdown
4. A minimal example of how to use the Markdown
5. A minimal example of how to use the Markdown
6. A minimal example of how to use the Markdown
7. A minimal example of how to use the Markdown
8. A minimal example of how to use the Markdown
9. A minimal example of how to use the Markdown
10. A minimal example of how to use the Markdown
''';

Can you please provide a minimal complete reproducible code sample
Thank you

[gazreese]

@dannyvalentesonos commented on 2021-09-15T21:11:24Z (migrated from flutter/flutter#81749)

---

@TahaTesser I don't have the code anymore that was causing this, so I'd say it can be closed. Thanks.

[gazreese]

@TahaTesser commented on 2021-09-17T13:18:45Z (migrated from flutter/flutter#81749)

---

Hi @dannyvalentesonos
Given your last message I feel safe to close this issue, if you disagree please write in the comments and I will reopen it.
Thank you

[gazreese]

@github-actions commented on 2021-10-01T14:00:53Z (migrated from flutter/flutter#81749)

---

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.

[gazreese]

@ChristianEdwardPadilla commented on 2023-07-17T18:52:09Z (migrated from flutter/flutter#81749)

---

Reopening because I am able to repro this and there is an app in Google that is affected:

wrapping observed for large font


Minimal reproduction app:

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'markdown formatting test',
          style: TextStyle(fontFamily: 'ProductSans'),
        ),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: ExampleWidget(
            text: '''
# Minimal Markdown Test
1. A minimal example of how to use the Markdown A minimal 
example of how to use the Markdown
2. A minimal example of how to use the Markdown A minimal
 example of how to use the Markdown
3. A minimal example of how to use the Markdown A minimal 
example of how to use the Markdown
4. A minimal example of how to use the Markdown
5. A minimal example of how to use the Markdown
6. A minimal example of how to use the Markdown
7. A minimal example of how to use the Markdown
8. A minimal example of how to use the Markdown
9. A minimal example of how to use the Markdown
10. A minimal example of how to use the Markdown
11. A minimal example of how to use the Markdown
12. FINAL A minimal example of how to use the Markdown
''',
          ),
        ),
      ),
    );
  }
}

class ExampleWidget extends StatelessWidget {
  final String text;

  ExampleWidget({
    Key? key,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MarkdownBody(
      data: text,
      styleSheet: MarkdownStyleSheet.fromTheme(
        ThemeData(
          textTheme: TextTheme(
            bodyMedium: TextStyle(
              fontSize: 22.0,
            ),
          ),
        ),
      ),
    );
  }
}

Note that if the font size of the entry numbers is lowered they do not wrap and the bug is not observed (below is using 12pt font instead of 22pt like above):

wrapping not observed for small font


[gazreese]

@stuartmorgan-g commented on 2023-07-20T18:34:29Z (migrated from flutter/flutter#81749)

---

@ChristianEdwardPadilla Should there be a customer label on this? Is the affected team planning on upstreaming a fix?

[gazreese]

@Kurogoma4D commented on 2024-03-26T06:44:24Z (migrated from flutter/flutter#81749)

---

This problem still exists when the number on the ordered list becomes two digits or the font size is enlarged (or using bulletBuilder parameter too).
Simply removing the SizedBox seems to solve the problem, but is there any concerns?

Removing SizedBox is breaking MarkdownStyleSheet.listIndent parameter.
The better solution is using ConstrainedBox instead.

[gazreese]

@GunawanAhmad commented on 2024-07-03T07:39:55Z (migrated from flutter/flutter#81749)

---

They define the width of the SizedBox with listIndent + left and right listBulletPadding. Try to increase the listIndent and it will solved the issue. Also try combine it with FittedBox to make the text size dynamic. Here is my current implementation

                MarkdownBody(
                  bulletBuilder: (parameters) {
                    if (parameters.style == BulletStyle.orderedList) {
                      return FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          "${parameters.index + 1}.",
                          style: MarkdownFonts.body,
                          maxLines: 1,
                        ),
                      );
                    } else {
                      return Transform.translate(
                        offset: const Offset(20, 0),
                        child: const Text(
                          "•",
                          style: TextStyle(fontSize: 24),
                        ),
                      );
                    }
                  },
                  data: text,
                  styleSheet: MarkdownStyleSheet(
                      listIndent: 40, 
                );

[gazreese]

@github-actions commented on 2025-07-23T14:02:48Z (migrated from flutter/flutter#81749)

---

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.