搜索插件、代码仓与 APP 分类

flutter_polygon 封面
插件详情v0.3.0+2

flutter_polygon

一个用于在 Flutter 中处理多边形的插件。提供裁剪器(PolygonClipper、ClipPolygon)和边框(PolygonBorder)

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
2830
喜欢数
48
Pub 分数
150

安装插件

flutter pub add flutter_polygon

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

flutter_polygon 是一个 Flutter 插件,提供用于在用户界面中处理多边形的工具。它包含一个裁剪器(PolygonClipper、ClipPolygon),可将小部件裁剪为多边形形状,以及一个边框(PolygonBorder),用于绘制多边形轮廓。该包支持多种平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,非常适合创建自定义形状的 UI 元素。它使开发者能够使用简单且可重用的组件,设计出具有非矩形边界的视觉吸引力布局。

适合场景

  • 创建自定义形状的容器
  • 设计交互式多边形按钮
  • 构建几何用户界面布局
  • 动画多边形过渡
  • 实现基于地图的多边形叠加
  • 渲染装饰性多边形边框

主要特点

  • PolygonClipper 用于裁剪控件
  • PolygonBorder 用于绘制多边形轮廓
  • 跨平台支持
  • 用于定义顶点的简单 API
  • 支持动态多边形更新
  • 内置的形状渲染工具

适合对象

  • 寻求独特形状的UI设计师
  • 开发几何界面的开发者
  • 需要自定义剪切路径的应用
  • 带有多边形元素的交互式可视化
  • 需要响应式多边形边框的项目

使用建议

  • 需要手动定义顶点
  • 性能可能因复杂多边形而异
  • 有限的内置形状预设
  • 未针对高频更新进行优化
  • 可能需要额外的逻辑来检测碰撞
  • 最适合静态或很少变化的多边形

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

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.

Example1 Example2

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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。