polygon_clipper

Package Overview

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

A Flutter plugin that allows widgets to be clipped into custom polygon shapes. It enables developers to transform any widget into a polygonal form, offering creative design possibilities. The package is simple to use and works seamlessly with any widget type, making it ideal for unique UI layouts and visual effects. It supports dynamic shape adjustments and integrates smoothly within the Flutter rendering pipeline.

Use cases

Creating custom-shaped UI elements
Designing interactive polygonal buttons
Building visually distinct card layouts
Implementing geometric animations
Enhancing app branding with unique shapes

Key features

Supports any widget as input
Dynamic polygon shape customization
Simple API integration
Works across all Flutter platforms
Efficient rendering performance

Suitable for

UI designers seeking creative layouts
Developers building games or interactive apps
Apps requiring distinctive visual identity
Prototyping experimental interfaces
Projects with geometric design themes

Considerations

May impact performance with complex polygons
Requires careful handling of clipping boundaries
Not optimized for very large or animated polygons
Limited documentation beyond basic usage
Best suited for static or low-frequency shape changes

Original README

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

flutter_polygon

A Flutter plugin to create views using regular polygon shapes (e.g. Pentagons and Hexagons).

Based on the polygon_clipper package by leonardocaldas.

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_polygon: ^0.2.0

Usage

Clipping

Use the ClipPolygon widget to clip a child widget.

import 'package:flutter_polygon/flutter_polygon.dart';

ClipPolygon(  
 sides: 6, 
 borderRadius: 5.0,     // Defaults to 0.0 degrees
 rotate: 90.0,          // Defaults to 0.0 degrees
 boxShadows: [  
  PolygonBoxShadow(color: Colors.black, elevation: 1.0),
  PolygonBoxShadow(color: Colors.grey, elevation: 5.0)
 ],
 child: Container(color: Colors.black),
);

Borders

Use the PolygonBorder shape with your favorites widgets!

import 'package:flutter_polygon/flutter_polygon.dart';

FloatingActionButton(
  shape: PolygonBorder(
    sides: 6,
    borderRadius: 5.0,                                      // Defaults to 0.0 degrees
    rotate: 30.0,                                           // Defaults to 0.0 degrees
    border: BorderSide(color: Colors.red, width: 2.0),      // Defaults to BorderSide.none
  ),
  onPressed: () {},
  child: Icon(Icons.star),
),

Other widgets:

TextButton, ElevatedButton, ...
Container
Chip
...

Contributing

If you find an issue with this package, please open an issue on github.

If you wish to contribute to this project, I encourage you to open a pull request.

Credit

Based on the polygon_clipper package by leonardocaldas.

Search packages, repositories and app categories

Install package