Rounded rectangle with smoother transition between straight and curved parts used in macOS and iOS.

Below is a cupertino rounded rectangle (squircle) in blue color overlayed on top of a regular rounded rectangle with the same corner radius (100) in red:

Path algorithm is based on this article.

Usage

Creating "Cupertino" rounded rectangle path:

  import 'package:cupertino_rrect/cupertino_rrect.dart';

  final path = Path();
  path.addCupertinoRRect(rrect);

Using CupertinoRectangleBorder:

  import 'package:cupertino_rrect/cupertino_rrect.dart';

  Container(
    decoration: ShapeDecoration(
      shape: CupertinoRectangleBorder(
        borderRadius: BorderRadius.circular(radius),
      ),
    ),
  ),

Additional information

Example app is located in example directory. Example is also available online.

Libraries

cupertino_rrect