Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
bubble_lens cover
Package detailsv2.0.0

bubble_lens

Flutter customizable reproduction of the Apple Watch UI animation

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
2.2K
Likes
101
Pub points
155

Install package

flutter pub add bubble_lens

Package Overview

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

Bubble Lens is a Flutter package that recreates the Apple Watch's iconic UI animation, offering a customizable lens effect that simulates a magnified bubble overlay. It enables developers to add dynamic, interactive visual feedback to elements, ideal for touch interactions or focus highlights. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent behavior across devices. With smooth animations and flexible configuration options, it enhances user experience in apps requiring intuitive, tactile feedback.

Use cases

  • Interactive touch feedback
  • Focus highlighting in UI
  • Apple Watch-style animations
  • Enhanced gesture recognition
  • Visual effects in mobile apps
  • Cross-platform animated overlays

Key features

  • Customizable lens size and shape
  • Smooth magnification animation
  • Support for multiple platforms
  • Configurable opacity and blur
  • Gesture-driven activation
  • Responsive design integration

Suitable for

  • Developers seeking Apple Watch-inspired UX
  • Apps needing subtle interactive feedback
  • Designers focused on micro-interactions
  • Cross-platform app creators
  • UI/UX enthusiasts
  • Prototyping interactive interfaces

Considerations

  • Performance impact with multiple lenses
  • Requires careful tuning for optimal UX
  • May not suit all design aesthetics
  • Limited customization beyond core animation
  • Best used sparingly to avoid distraction
  • Dependent on platform-specific rendering capabilities

Original README

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

Bubble Lens

pub package

A reproduction of the Apple Watch UI animation

Example

Usage

Import the package
import 'package:bubble_lens/bubble_lens.dart';
Use the package
BubbleLens(
    width: 250,
    height: 250,
    widgets: [
        Container(
            width: 100,
            height: 100,
            color: Colors.red
        ),
        ...
    ]
);

Required Parameters

Prop Type Default Description
width double N/A Width of the container.
height double N/A Height of the container.
widgets List N/A List of widgets to display.

Optional Parameters

Prop Type Default Description
size double 100 Maximum size of a widget.
paddingX double 10 Horizontal padding between widgets.
paddingY double 0 Vertical padding between widgets.
duration Duration Duration(milliseconds: 100) Animation's duration.
radius Radius Radius.circular(999) Widget's radius.
highRatio double 0 High ratio, should be >= 0.
lowRatio double 0 Low ratio, should be >= 0.

Example

Find the example wiring in the Bubble Lens example application.

Details

See the bubble_lens.dart for more details.

Issues and feedback

Please file issues to send feedback or report a bug. Thank you!

Categories

Animation & TransitionLayout & Overlay

Source repository

Projects using this package

No data available yet.