strange behavior when using BorderType.Circle

[humazed]

                                DottedBorder(
                                  borderType: BorderType.Circle,
                                  radius: Radius.circular(12),
                                  dashPattern: [4, 4],
                                  color: Colors.grey[400],
                                  child: Padding(
                                    padding: const EdgeInsets.all(16),
                                    child: Column(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Text(
                                          '25:34',
                                          style: TextStyle(
                                            fontSize: 32,
                                            fontWeight: FontWeight.bold,
                                          ),
                                          textAlign: TextAlign.center,
                                        ),
                                        Text(
                                          'دقائق',
                                          style: textTheme.subhead,
                                          textAlign: TextAlign.end,
                                        ),
                                      ],
                                    ),
                                  ),
                                )

the same code when using BorderType.RRect it works as expected

[ajilo297]

Hey I am not able to reproduce this issue. This is what I am getting.

This is the code I used (modified only the TextTheme)

DottedBorder(
  borderType: BorderType.Circle,
  radius: Radius.circular(12),
  dashPattern: [4, 4],
  color: Colors.grey[400],
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          '25:34',
          style: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
          ),
          textAlign: TextAlign.center,
        ),
        Text(
          'دقائق',
          style: Theme.of(context).textTheme.subhead,
          textAlign: TextAlign.end,
        ),
      ],
    ),
  ),
)

I can't help unless I have more context on how you are building this.

[ajilo297]

Closing this issue due to no response. Feel free to comment here when you have more details

[rmahmadkhan]

Hey, this issue still persists in the case of BorderType.Circle.

If we write just one letter in the Text(), it just place it outside the border.

See code:

DottedBorder(
      borderType: BorderType.Circle,
      padding: EdgeInsets.all(15),
      child: Text('1'),
)

The same code if I change BorderType.Circle to BorderType.Oval or BorderType.Rect outputs:

I solved this by wrapping DottedBorder inside SizedBox and then wrapping the Text with Center

SizedBox(
      width: 30,
      height: 30,
      child: DottedBorder(
        borderType: BorderType.Circle,
        child: Center(child: Text('1')),
      ),
)

So, here's the output now:

Please open this issue.