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

flutter_box_transform 封面
插件详情v0.4.7

flutter_box_transform

box_transform 包的 Flutter 实现,提供简单的 2D 方框变换操作以及 UI 中矩形的高级缩放功能。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1.9万
喜欢数
123
Pub 分数
160

安装插件

flutter pub add flutter_box_transform

插件介绍

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

flutter_box_transform 是一个 Flutter 包,可实现精确的 2D 矩形变换操作,简化 UI 布局中矩形区域的处理。它支持对矩形进行高级缩放和几何变换,非常适合动态 UI 元素、叠加层和交互式组件。该包专为跨平台使用而设计,可在 Android、iOS、Web、macOS、Windows 和 Linux 上无缝运行。它提供直观的 API,仅需少量代码即可调整盒子的位置、缩放和旋转。专为需要对视觉布局几何进行精细控制的开发者设计。

适合场景

  • 动态 UI 元素定位
  • 交互式覆盖层设计
  • 响应式布局调整
  • 矩形的视觉变换
  • 跨平台 UI 一致性
  • 复杂形状操作

主要特点

  • 2D框变换工具
  • 高级矩形调整大小
  • 跨平台兼容性
  • 用于几何运算的直观 API
  • 支持缩放、旋转和平移
  • 内置对齐和偏移处理

适合对象

  • 需要精确布局控制的UI开发人员
  • 设计实现交互式界面的设计师
  • 开发响应式或动画布局的开发者
  • 使用复杂视觉效果构建跨平台应用的团队
  • 需要实时矩形操作的应用程序

使用建议

  • 需要理解二维坐标系
  • 最适合高级布局场景
  • 可能为简单UI需求增加开销
  • 仅限矩形变换,不支持任意形状
  • 不适用于高频动画循环

原始 README

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

Banner

Box Transform

Build Tests codecov

Box Transform provides packages that allows you to programmatically handle box resizing and dragging. It provides highly flexible, programmatically resizable and draggable boxes that can be used in any Dart or Flutter project.

Packages

Package Pub Description
box_transform Pub Version A pure Dart implementation for box transformation operations that does not rely on Flutter.
flutter_box_transform Pub Version A Flutter implementation that provides a flexible, customizable and easy to use interface tailored for Flutter projects.

Features

  • 📏 Dimension Constraining: Set maximum and minimum constraints to keep boxes within specific boundaries while resizing.
  • 🔁 Flipping Mechanics: Advanced positional-flipping when resizing hits extreme values with hard constraints.
  • 🔒 Drag Clamping: Specify clamping boxes to keep your transformable boxes within a specific region.
  • 🎨 Flexible Resizing Modes: Choose from four different resizing modes for more flexibility in how boxes are resized.
  • 📍 Customizable Anchor Points: Define resizing corner-handles to anchor different parts of the box when resizing.
  • 🎨 Customizable Handles: Use default resizing handles or define your own custom handles.
  • 🌀 Rotation Support: Rotate boxes around their center, with full rotated-aware drag, resize, flip, and clamping. Choose between BindingStrategy.originalBox (the unrotated logical rect stays in the clamp; rotated corners may extend outside) and BindingStrategy.boundingBox (the rendered axis-aligned footprint stays inside). Rotation gestures slide-then-freeze: when the requested angle would force the rect outside the clamp, the box slides into available slack first, then caps at the last feasible angle. Rotated force-flip also falls back to the natural direction when the flipped state can't fit, so the rect stays clamp-pinned instead of jumping or freezing.
  • 🚀 Easy Integration: Integrate Box Transform into your Dart or Flutter project with ease.

Getting Started

Go to the Getting Started page of the documentation to start using Box Transform.

Example App: box-transform-example.firebaseapp.com
Playground: box-transform-playground.firebaseapp.com

Documentation

Documentation is available at boxtransform.hyperdesigned.dev.

Contributing

See CONTRIBUTING.md for details.

See DEVELOPMENT.md for development setup.

Authors


Birju Vachhani

Saad Ardati

Feel free to join our Discord server for any inquiries or support!

License

Copyright © 2023 Hyperdesigned

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

所属分类

依赖

依赖清单 2 项

源码仓库

使用此插件的项目