aloisdeniel / figma_squircle

Flutter implementation of Figma's corner smoothing.

Figma Squircle

Flutter implementation of Figma's corner smoothing.

Usage

Decoration

The SmoothRectangleBorder can be provided to a regular ShapeDecoration with a custom SmoothBorderRadius.

Container(
    height: 100,
    width: 100,
    decoration: ShapeDecoration(
        color: Colors.red.withOpacity(0.75),
        shape: SmoothRectangleBorder(
            borderRadius: SmoothBorderRadius(
              cornerRadius: 10,
              cornerSmoothing: 0.5,
            ),
        ),
    ),
)

Only

Each corner can have an independent smoothing and radius.

SmoothBorderRadius.only(
    topLeft: SmoothRadius(
        cornerRadius: 10,
        cornerSmoothing: 1,
    ),
    topRight: SmoothRadius(
        cornerRadius: 20,
        cornerSmoothing: 0.4,
    ),
    bottomLeft: SmoothRadius(
        cornerRadius: 5,
        cornerSmoothing: 0.8,
    ),
    bottomRight: SmoothRadius(
        cornerRadius: 30,
        cornerSmoothing: 0.6,
    ),
),

Clip

To clip any widget with a smooth rectangle, use the ClipSmoothRect.

ClipSmoothRect(
    radius: SmoothBorderRadius(
        cornerRadius: 10,
        cornerSmoothing: 1,
    ),
    child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
    ),
)

Thanks

• tienphaw/figma-squircle's React Native implementation
• Figma team for publishing this article and MartinRGB for figuring out all the math behind it.
• George Francis for creating Squircley, which was my introduction to squircles.

figma_squircle's Issues

Difference between SmoothRectangleBorder and ContinuousRectangleBorder

What is the difference between Flutter's ContinuousRectangleBorder and this SmoothRectangleBorder? To me, both of them seems to be drawing squircles. I'd love to see the actual differences and know which is more accurate and better. Thanks!

Border & shadow on clipped image?

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

Stroke/BorderSide doesn't render properly for Ink widgets

Rendering just like this: #1

SmoothRectangleBorder is throwing unsupported error on HTML web renderer of Flutter web.

Wrapping with Opacity widget makes it work broken

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.)

Smooth corner does provide box shadow

If my container has box shadow then how can I manage it

Release 0.5.4 at pub.dev

Hey!
Could you release 0.5.4 version at pub.dev please

Affichage bizarre avec bouton

Hello,
J'ai utilisé votre package pour les smooth corners mais le rendu est bizarre quand le radius est élevé !
Il y a comme une espèce de pointe là où il ne faudrait avoir qu'un arrondi !

Un extrait de mon code:

import 'package:figma_squircle/figma_squircle.dart';
import 'package:auth_button_kit/auth_button_kit.dart';

AuthButton(
  onPressed: (m) => print('pressed $m'),
  brand: Method.google,
  shape: SmoothRectangleBorder(
    borderRadius: SmoothBorderRadius(
      cornerRadius: 30,
      cornerSmoothing: 1,
    ),
  ),
),

Merci par avance

Percentage radius

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.

SmoothRectangleBorder doesnt complete with the BoderSide of another SmoothRectangleBorder

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

SmoothRectangleBorder on a TextField?

I've been trying to add a SmoothRectangleBorder to a TextField, but it doesn't seem to work. This is my code:

 OutlineInputBorder myBorder() {
   return OutlineInputBorder(
      borderRadius: SmoothBorderRadius(        cornerRadius: 20,
        cornerSmoothing: 1,
),
      borderSide: BorderSide(
        color: Color(0xff8F5CFC),
        width: 3,
      ),
    );
  }

Doesn't work with DecoratedBox

The radius value is applied but the smoothing radius is not. Works on Material, though