fl_magnetic library

A Flutter library for creating magnetic, physics-based bubble UIs.

This library provides widgets and utilities for creating interactive bubble/magnetic interfaces similar to Apple's Magnetic UI patterns. Bubbles are attracted to the center and collide with each other using physics simulation.

Key features:

  • Physics-based bubble movement with collision detection
  • Customizable node styles and behaviors
  • Support for text and image bubbles
  • Selection and interaction handling
  • Flexible physics configuration

Example usage:

MagneticView(
  nodes: [
    MagneticNode.label(text: 'Hello'),
    MagneticNode.image(image: AssetImage('asset.png'), text: 'World'),
  ],
  onSelect: (node) => print('Selected: ${node.text}'),
)

Classes

ImageNode
Image convenience node type.
LabelNode
Text-only convenience node type.
MagneticController
Controller for managing a collection of magnetic nodes.
MagneticNode
Represents a single node in the magnetic view.
MagneticNodeBehavior
Abstract class for customizing node behavior.
MagneticNodeStyle
Style configuration for magnetic nodes.
MagneticParticle
Represents a single particle in the physics simulation.
MagneticPhysics
Physics simulation for magnetic nodes.
MagneticView
A widget that displays magnetic, physics-based bubbles.
MagneticViewTuning
Configuration for tuning the magnetic view's physics and rendering behavior.

Enums

MagneticNodeAnimationType
Types of animations that can be applied to magnetic nodes.

Typedefs

MagneticNodeAnimationBuilder = Widget Function(BuildContext context, MagneticNode node, MagneticNodeAnimationType type, bool selected, Animation<double> animation, Widget child)
Builder function for creating custom node animations.
MagneticNodeBuilder = Widget Function(BuildContext context, MagneticNode node, bool selected)
Builder function for creating custom node widgets.