Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv0.3.0

custom_rounded_rectangle_border

A simple package for drawing custom shape borders with full control on how you want the sides to be rendered.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
7.1K
Likes
23
Pub points
150

Install package

flutter pub add custom_rounded_rectangle_border

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that enables developers to create custom-shaped borders with precise control over each side's rendering. It extends the functionality of standard rounded rectangle borders by allowing individual customization of corner radii, border width, and stroke style per side. Ideal for designing unique UI elements with asymmetrical or tailored border effects. The package integrates seamlessly into Flutter’s decoration system and supports all major platforms.

Use cases

  • Creating asymmetric border designs
  • Customizing individual corner radii
  • Designing unique UI frame elements
  • Building responsive decorative containers
  • Implementing animated border effects
  • Enhancing visual hierarchy with styled borders

Key features

  • Per-side border customization
  • Flexible corner radius control
  • Support for all Flutter platforms
  • Easy integration with BoxDecoration
  • Extensible for advanced styling
  • Cross-platform consistency

Suitable for

  • UI designers seeking creative border options
  • Developers building custom widgets
  • Apps requiring unique visual boundaries
  • Projects with high design fidelity
  • Teams using Flutter for multi-platform apps
  • Prototyping interactive UI components

Considerations

  • Requires understanding of Flutter painting system
  • May increase complexity for simple layouts
  • Performance impact with heavy use in lists
  • Limited documentation beyond basic usage
  • Not suitable for dynamic runtime border changes without rebuilds
  • Best used with optimized widget trees

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Custom rounded rectangle border

A simple package for drawing custom shape borders with full control on how you want the sides to be rendered.

It simply addresses an open Flutter issue where an error is thrown when you try to set a borderRadius and border at the same time, see open issue below: Support non-uniform Borders with a non-zero borderRadius

Sample Usage

Container(
    decoration: ShapeDecoration(
    shape: CustomRoundedRectangleBorder(
      borderRadius: BorderRadius.only(
          bottomLeft: 5.0,
          bottomRight: 5.0),
      leftSide: BorderSide(
          color: Colors.black),
      bottomLeftCornerSide: BorderSide(
          color: Colors.black),
      rightSide: BorderSide(
          color: Colors.black),
      bottomRightCornerSide: BorderSide(
          color: Colors.black),
      bottomSide: BorderSide(
          color: Colors.black),
    ),
),)

Flutter

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Categories

Clipper & Decoration

Source repository

Projects using this package

No data available yet.