Weird glitch in certain sizes

[sneiderlein]

 const TextStyle textStyle = const TextStyle(
      color: Colors.darkBlue,
      fontWeight: FontWeight.w800,
      fontSize: 17,
      letterSpacing: -1,
    );
    return Container(
      padding: EdgeInsets.only(top: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text(title, style: textStyle),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 3, right: 3, bottom: 5),
              child: DottedLine(
                dashColor: Colors.darkBlue,
                direction: Axis.horizontal,
                dashRadius: 100,
                dashGapRadius: 10,
                dashLength: 3,
                dashGapLength: 1.2,
                lineThickness: 3,
              ),
            ),
          ),
          Container(
            width: 50,
            child: Text(value, style: textStyle),
          ),
        ],
      ),

[tobatha]

This is due to it wrapped and started over in a new line.

[Sikorrr]

I have a similar case

`@override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home: Scaffold(
        body: Center(
          child: DottedLine(
            direction: Axis.horizontal,
            lineLength: 400,
            lineThickness: 28,
            dashLength: 8,
            dashColor: Colors.transparent,
            dashGapLength: 2,
            dashGapColor: Colors.red,
          ),
        ),
      ),
    );
  }`

[umechanhika]

Thank you for reporting the issue!
When I checked the sample code of dotted_line published in / example, it worked normally before, but when I check it now, the display is also broken.

I will continue to investigate the cause, but it may take some time.
If you find out about this issue, please leave a comment on this issue.

[Sikorrr]

I checked it today and I can say that the display is broken in flutter versions >= 2.0.0. In version 1.22.6 it works fine.

[umechanhika]

@Sikorrr
Thank you for providing information!
It was a very good hint.

I compared the code in /example with v2.2.3 and v1.22.6.
Looking at the layout with Flutter Inspector, it seems that the layout broken in both versions.
However, it seems that it was not drawn on the screen in v1.22.6.

I'm guessing that the implementation of this method is wrong.
I will continue to investigate.
Thank you for your cooperation.

  int _calculateDashAndDashGapCount(double lineLength) {
    final dashAndDashGapLength = dashLength + dashGapLength;
    var dashAndDashGapCount = lineLength / dashAndDashGapLength * 2;

    if (dashLength <= lineLength % dashAndDashGapLength) {
      dashAndDashGapCount += 1;
    }

    return dashAndDashGapCount.toInt();
  }

[umechanhika]

As a result of my investigation of the cause, I found that this if statement causes an extra Container to be drawn.
I was able to confirm that removing this would fix the code in /example.
I plan to update the library with this fix.

 int _calculateDashAndDashGapCount(double lineLength) {
    final dashAndDashGapLength = dashLength + dashGapLength;
    var dashAndDashGapCount = lineLength / dashAndDashGapLength * 2;

//    if (dashLength <= lineLength % dashAndDashGapLength) {
//      dashAndDashGapCount += 1;
//    }

    return dashAndDashGapCount.toInt();
  }

@Sikorrr
However, when I tried it with the code you provided, it wasn't fixed yet.
Perhaps, I think your layout collapse is another cause.
I checked with Pixel 5, and the horizontal size of the entire screen was 392.7.
However, it seems that the cause is that 400 is specified for lineLength and it is out of the line.
Can you check once with the Flutter Inspector how wide your environment is?

@sneiderlein
I'd also like to try your code, but I couldn't draw the exact layout because I don't know the overall layout.
Maybe your code has a lineLength greater than the width it can display?
Please check.