There is currently an issue with how borders are painted. This PR aims to fix it.

Before this PR: (Red being the same component without a border)

With this PR:

As we can see, before this PR, the component without border would not perfectly match with the same with a border.

Hello, thanks for this cool package. I'm having trouble figuring out how to add a border to a clipped image. Also, adding a shadow. I've tried several combinations but not luck so far. Any help appreciated. Thanks

I have a custom squircle painter that I 'stole' off flutter/flutter PRs a while back. One thing I did was add the ability to paint percentage radii. It's a super handy feature, and the only thing stopping me from switching to figma_squircle full time.

While there are ways to do this with a LayoutBuilder, there is enough information available in OutlinedBorder to paint percentage radii from a constructor and a percentage value.

Minimal Code Example:

import 'package:figma_squircle/figma_squircle.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class ASection extends StatelessWidget {
  const ASection({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          decoration: ShapeDecoration(
            color: Colors.blue,
            shape: SmoothRectangleBorder(
              borderRadius: SmoothBorderRadius.only(
                topLeft: SmoothRadius(
                  cornerRadius: 10,
                  cornerSmoothing: 0.5,
                ),
                topRight: SmoothRadius(
                  cornerRadius: 10,
                  cornerSmoothing: 0.5,
                ),
              ),
            ),
          ),
          height: 48,
        ),
        Container(
          decoration: ShapeDecoration(
            color: Colors.white,
            shape: SmoothRectangleBorder(
              side: BorderSide(
                color: Colors.green,
              ),
              borderRadius: SmoothBorderRadius.only(
                bottomLeft: SmoothRadius(
                  cornerRadius: 10,
                  cornerSmoothing: 0.5,
                ),
                bottomRight: SmoothRadius(
                  cornerRadius: 10,
                  cornerSmoothing: 0.5,
                ),
              ),
            ),
          ),
          height: 48,
        )
      ],
    );
  }
}

If you are using BoxDecorations this does not happen. I think its because SmoothRectangleBorder extends OutlinedBorder

Hi, love this package!

However, I've encountered a bug. I'm using it as border of a MaterialButton.

MaterialButton( elevation: 0, shape: SmoothRectangleBorder( side: BorderSide(color: Colors.white, width: 4), borderRadius: SmoothBorderRadius( cornerRadius: 16, cornerSmoothing: 1.0, ), ), color: lightestColor.withOpacity(0.3)...

When I wrap it with Opacity widget, there is an error on the corners as following photo shows. (Bottom one is wrapped with Opacity) (Even if the opacity is given as "0.99", it happens.)