three_d_ui_builder 0.1.0
three_d_ui_builder: ^0.1.0 copied to clipboard
Build futuristic 3D UIs in Flutter with widgets like buttons, flipping cards, and cube containers using a simple Flutter-style API—no OpenGL required, works across iOS, Android, Web, and Desktop.
Changelog #
All notable changes to three_d_ui_builder are documented in this file.
Format follows Keep a Changelog.
Versioning follows Semantic Versioning.
Unreleased #
Planned #
SphereMenu— full Fibonacci sphere packing for evenly distributed menu itemsExtrudedText— Arabic / RTL font support- Deep
flutter_sceneintegration for glTF avatar embedding - Shader-based frosted glass, neon glow, and hologram visual effects
- Theme packs: Glassmorphism, Cyberpunk, Minimal 3D
0.1.0 — 2026-06-10 #
Initial release of three_d_ui_builder.
Added #
Core Math (src/core/math/)
Vec3— Immutable, value-type 3D vector with full arithmetic (+,-,*,/, unary-), geometric operations (dot,cross,normalized,reflect), linear interpolation (lerp), distance, clamp, andcopyWith. Named constants:zero,one,right,up,forward,left,down,back.Quat— Immutable unit quaternion for 3D rotations. Factory constructors:axisAngle,euler,fromToRotation. Operations: Hamilton product (*),conjugate,inverse,rotate(Vec3). Static interpolation:slerp(spherical linear, shortest-arc, constant-speed). Decomposition viaaxisAnglenamed record.Transform3D— Immutable composite transform (positionVec3+ rotationQuat+ scaleVec3). Converts toMatrix4viatoMatrix4()andtoMatrix4Perspective(depth). Interpolates withlerp(SLERP for rotation). Composes transforms withcompose. Named constructors:identity,translated,rotated,scaled.copyWithsupport.Transform3DTween—Tween<Transform3D>that useslerp(with SLERP for rotation). Plugs directly into Flutter'sAnimationController.Matrix4Ext— Extension methods onMatrix4:withPerspective(depth),trs(position, rotation, scale).
Core Foundation (src/core/foundation/)
ThreeDObject— Base data model for any object in a 3D scene. Holdstransform,material,id, andisVisibleflag.ThreeDScene— Scene manager that holds a list ofThreeDObjectinstances. Providesadd,remove,findById, andsorted(depth-sorted back-to-front) access.DepthSorter— Utility that sorts a list ofThreeDObjectby their world Z position relative to a camera direction using a painter's algorithm.
Core Engine (src/core/engine/)
SceneRenderer— High-levelStatefulWidgetthat accepts aThreeDSceneand renders it by delegating each visible object to its ownTransformwidget.RenderPipeline— Manages the render cycle: culls invisible objects, depth-sorts viaDepthSorter, and computes per-objectMatrix4transforms with perspective.CanvasBridge— Bridges the FlutterCanvas2D painting API with the 3D transform stack, enablingCustomPainter-based widgets to participate in the scene.
Widgets — Buttons (src/widgets/buttons/)
ThreeDButton— Button with a real 3D depth slab (face + side) painted byCustomPainter. Presses in onTapDownviaAnimationController, releases onTapUpwithCurves.easeOut. Optional specular highlight streak. ReadsdefaultDepthfromThreeDTheme.FloatingAction3D— ExtendedFloatingActionButtonwith a continuous levitation pulse animation and drop shadow that oscillates with the button position.IconButton3D— Icon that performs a 180° Y-axis rotation on each press usingFlipAnimation, then returns to rest with a spring settle.
Widgets — Cards (src/widgets/cards/)
FlipCard3D— Card with perspective-correct flip betweenfrontandbackwidgets. Flip axis configurable (FlipAxis.x/y/z).FlipCard3DControllerfor programmatic control (flip,showFront,showBack).onFlipCompletecallback.TiltCard— Card that tilts to follow pointer position (mouse/touch). Optional gyroscope mode (useGyroscope: true) usingsensors_plus. ConfigurablemaxTiltDegreesandperspective.DepthCard— Multi-layer card where eachDepthLayerrenders at a different Z offset. Pointer hover translates layers at different rates to produce depth parallax.ParallaxCard— Card with a background image that scrolls atparallaxFactorspeed relative to the foreground content as the card is tilted.
Widgets — Lists (src/widgets/lists/)
CircularList3D— Carousel on a 3D ring. Items are scaled (0.55..1.0) and faded (0.4..1.0) by Z depth. Horizontal drag rotates the ring.autoRotatewith configurablerotationSpeedandrotationDirection.snapOnReleasefor slot-style snapping. Depth-sorted back-to-front rendering.CylinderList— Drum/slot-machine list. Items are positioned on the curved surface of a cylinder and rotate into the viewport on scroll.CoverFlow3D— iTunes CoverFlow-style page view. Selected item faces forward; neighbours fan out on each side with increasing Y-rotation and depth offset.SphereMenu— Menu items distributed across a sphere surface. Dragging rotates the sphere. Items scale and fade by depth. (Beta: uses simplified distribution in 0.1.0; Fibonacci packing arriving in 0.2.0.)
Widgets — Containers (src/widgets/containers/)
CubeContainer— Six-faced 3D cube. Each face is aWidgetrendered viaTransformwith correctly computed face matrices (front, back, left, right, top, bottom). Free-drag rotation withonPanUpdate.CubeController.showFace(CubeFace)for animated face navigation.onFaceVisiblecallback.Panel3D— Flat panel with programmable X/Y tilt and a dynamic drop shadow calculated fromThreeDTheme.lightPosition. AcceptsMaterial3Dfor surface appearance.Stack3D— Replacement forStackwhere each child is wrapped in aStack3DItemwith adepthvalue. Children are positioned with increasing Z translation and slight perspective scaling.
Widgets — Text (src/widgets/text/)
ExtrudedText— Renders text with a visible depth extrusion. UsesCustomPainterto draw N offset copies of the text path insideColorthen the face copy infaceColor. Supports allTextStyleproperties.FloatingLabel— A label that performs a continuous float animation above itschild. The float is driven byFloatAnimationwith configurableamplitudeandfrequency.
Widgets — Scene (src/widgets/scene/)
ThreeDSceneWidget— Root container for complex multi-object scenes. Accepts aCameraControllerand a list ofLightSourceobjects. Propagates lighting context to all childThreeDObjectwidgets.CameraController— Configures the virtual camera:position,target,fov,near, andfarclip planes. Computes the view-projection matrix.LightSource— Represents a scene light. Named constructors:directional,point,ambient. Properties:color,intensity,direction/position.
Animation (src/animation/)
Transform3DTween— (see Core Math above)RotationAnimation—Animation<Quat>usingQuat.slerp. Accepts aCurve. Takes the shortest rotational arc automatically.ContinuousRotationAnimation— Infinite spinningAnimation<Quat>driven by anAnimationControllerin repeat mode. ConfigurableaxisandradiansPerSecond.FloatAnimation— SinusoidalAnimation<double>(Y offset). Configurableamplitude(pixels) andfrequency(Hz).FlipAnimation—Animation<double>in[0, π]with automatic face-switch detection atπ/2. Used internally byFlipCard3DandIconButton3D.Spring3D— Physics-based spring factory. UsesSpringSimulationfromflutter/physics.dart. Static presets:snappy,bouncy,gentle,stiff. ReturnsAnimation<Transform3D>.SpringTransform3D— ConvenienceStatefulWidgetthat auto-springs totargetTransformwhenever it changes.
Gestures (src/gestures/)
Drag3DRecognizer— Wraps a child in aGestureDetectorand converts 2D drag deltas into 3D rotationQuatdeltas viaQuat.axisAngle. Sensitivity configurable.PinchDepthRecognizer— Maps pinch scale factor to a Z-axis depth change.onDepthChange(double scale)callback.GyroscopeTilt— Subscribes tosensors_plusgyroscope stream and converts angular velocity totiltX/tiltYvalues fed to a builder function.
Painters (src/painters/)
ShadowPainter3D—CustomPainterthat draws a dynamic drop shadow whose offset and blur are computed fromThreeDTheme.lightPositionrelative to the widget's 3D position.EdgePainter—CustomPainterthat draws visible edges of a 3D shape using projected 2D line segments. Used byCubeContainerandPanel3Dfor edge highlights.ReflectionPainter—CustomPainterthat renders a blurred, opacity-reduced reflection below a widget to simulate a reflective floor surface.
Theme (src/theme/)
ThreeDTheme—InheritedWidgetthat propagatesThreeDThemeDatadown the tree.ThreeDTheme.of(context)falls back toThreeDThemeData.defaults().ThreeDThemeData— Immutable theme data. Fields:defaultDepth,defaultMaterial,shadowStyle,enableLighting,lightPosition,perspective. Presets:defaults(),cyberpunk(),neumorphic().Material3D— Immutable surface description:color,metalness,roughness,opacity,isFrosted. Named presets:matte,glossyPlastic,metallic,frostedGlass,rubber. Derived colour helpers:highlightColor,shadowColor.DepthShadowStyle— Enum:soft(Gaussian-blurred shadow),sharp(hard-edge shadow),colored(shadow tinted from light colour).
Utilities (src/utils/)
PerspectiveUtils— Static helpers:project(Vec3 point, double focalLength)→Offset,depthScale(double z, double radius),perspectiveMatrix(double depth).HitTest3D— Determines whether a 2D screen point intersects a 3D bounding rectangle given itsTransform3D. Used to implement tap handling on rotated/translated widgets.DebugOverlay— Development-mode overlay that draws X/Y/Z axis gizmos and bounding-box wireframes on top of any widget. Enabled viaThreeDDebugConfig.enabled = true.
Example App (example/)
- Five demo screens showcasing all widget families:
DemoButtons,DemoCards,DemoCircularList,DemoCubeScene,DemoSphereMenu.
Documentation (doc/)
getting_started.md— Installation, first widget, ThreeDTheme setupwidgets.md— Complete widget reference with parameters and examplesmath.md— Vec3, Quat, Transform3D API reference and math backgroundanimation.md— All animation classes, spring presets, tween usagetheming.md— ThreeDTheme, Material3D, DepthShadowStyle referencegestures.md— Drag, pinch, gyroscope gesture systemarchitecture.md— Package design decisions, render pipeline explanationperformance.md— Best practices, widget count guidelines, profiling tipscontributing.md— How to contribute, code style, test requirementsmigration.md— Migration notes fromflutter_3dandflutter_scene
Known Limitations in 0.1.0 #
SphereMenuuses simplified item distribution (not full Fibonacci packing). Uneven spacing may be visible with > 20 items.- Dynamic shadows in
ShadowPainter3Dare approximate (2D projection, not ray-traced). Complex overlapping objects may show shadow artefacts. ExtrudedTextdoes not yet support Arabic / RTL scripts — the extrusion direction is always left-to-right.- macOS, Windows, and Linux require
--enable-impellerflag for best results. GyroscopeTiltis a no-op on platforms without a gyroscope (Web, Desktop). A pointer-based fallback is used automatically.