Smooth Border #

iOS-style continuous corner radius (squircle) for Flutter. Zero dependencies.

Unlike standard BorderRadius.circular() which uses circular arcs with an abrupt transition, SmoothRectangleBorder uses cubic bezier curves that create a smooth, gradual transition between the straight edge and the curve — matching the visual style of iOS and Figma rounded rectangles.

Features #

• SmoothRectangleBorder — a ShapeBorder that works with any Flutter widget
• SmoothRectangleClipper — a CustomClipper<Path> for ClipPath
• Adjustable smoothing — from 0.0 (standard circular) to 1.0 (maximum smoothness)
• Zero dependencies — pure Dart/Flutter, no external packages
• All 4 corners symmetric — works correctly with any aspect ratio

Getting Started #

dependencies:
  smooth_border: ^1.0.0

import 'package:smooth_border/smooth_border.dart';

Usage #

Container / ShapeDecoration #

Container(
  decoration: ShapeDecoration(
    shape: SmoothRectangleBorder(borderRadius: 16),
    color: Colors.white,
    shadows: [
      BoxShadow(color: Colors.black12, blurRadius: 8, offset: Offset(0, 2)),
    ],
  ),
  child: Text("iOS Card"),
)

With border #

Container(
  decoration: ShapeDecoration(
    shape: SmoothRectangleBorder(
      borderRadius: 16,
      side: BorderSide(color: Colors.grey.shade300),
    ),
    color: Colors.white,
  ),
)

Card #

Card(
  shape: SmoothRectangleBorder(borderRadius: 12),
  child: ListTile(title: Text("Smooth Card")),
)

ClipPath (images, containers) #

ClipPath(
  clipper: SmoothRectangleClipper(borderRadius: 20),
  child: Image.network("https://..."),
)

ElevatedButton / OutlinedButton #

ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: SmoothRectangleBorder(borderRadius: 12),
  ),
  onPressed: () {},
  child: Text("Smooth Button"),
)

Dialog #

showDialog(
  context: context,
  builder: (_) => Dialog(
    shape: SmoothRectangleBorder(borderRadius: 20),
    child: Padding(
      padding: EdgeInsets.all(24),
      child: Text("Smooth Dialog"),
    ),
  ),
);

Smoothing levels #

// Standard circular (no smoothing)
SmoothRectangleBorder(borderRadius: 16, smoothing: 0.0)

// iOS/Figma default (recommended)
SmoothRectangleBorder(borderRadius: 16, smoothing: 0.6)

// Maximum smoothness
SmoothRectangleBorder(borderRadius: 16, smoothing: 1.0)

How it works #

Each corner is drawn with 2 cubic bezier segments instead of a single circular arc. The control points are derived from cos(45deg) ratios, matching the algorithm used by Figma and iOS for continuous corner radius.

The smoothing parameter controls how far the curve extends beyond the circular arc region:

API Reference #

SmoothRectangleBorder #

Implements OutlinedBorder, so it works everywhere ShapeBorder is accepted.

SmoothRectangleClipper #

Implements CustomClipper<Path> for use with ClipPath.

Contributing #

Contributions are welcome! Open an issue or submit a pull request on GitHub.

License #

MIT License. See LICENSE for details.