Rounded corners and borders are not precise in Flutter

Question

I would like to have a view like below:

My code is:

class SampleRoundedWidget extends StatelessWidget {
  final imageUrl = 'test.png';
  final domain = 'twitter.com';
  final description = 'Sample description';

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: context.activeTheme.bg6),
        borderRadius: BorderRadius.circular(_borderRadius),
      ),
      margin: const EdgeInsets.all(12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _image(),
          _divider(),
          _domain(),
          _description(),
        ],
      ),
    );
  }

  Widget _image() {
    return ClipRRect(
      borderRadius: BorderRadius.only(topLeft: RadiusCircular(_borderRadius), topRight: RadiusCircular(_borderRadius)),
      child: CachedNetworkImage(imageUrl: imageUrl),
    );
  }

  Widget _divider() {
    return Divider(height: 2);
  }

  Widget _domain() {
    return Padding(
      padding: const EdgeInsets.only(
        right: 8.0,
        left: 8.0,
        top: 8.0,
        bottom: 1.0,
      ),
      child: Text(domain),
    );
  }

  Widget _description() {
    return Padding(
      padding: const EdgeInsets.only(
        right: 8.0,
        left: 8.0,
        top: 1.0,
        bottom: 8.0,
      ),
      child: Text(description),
    );
  }

  final _borderRadius = 8.0;
}

However, I've noticed that corners are not precise:

Also, the divider has weird space:

Is it some kind of Flutter optimization when drawing? How I can make it more detailed?

Answer 1

Divider leaves the space, check height attribute. More details here