Search packages, repositories and app categories

parallax_effect cover
Package detailsv0.0.3

parallax_effect

Parallax effect animations for all platforms.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
17
Likes
43
Pub points
130

Install package

flutter pub add parallax_effect

Package Overview

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

A Flutter package that enables smooth parallax effect animations across all platforms, including Android, iOS, Web, macOS, Windows, and Linux. It allows developers to create immersive background visuals by animating layers at different speeds, enhancing user engagement with dynamic depth perception. Ideal for splash screens, onboarding flows, and visually rich interfaces, the package supports customizable speed, direction, and responsiveness. Built with performance in mind, it integrates seamlessly into existing Flutter projects using simple, intuitive APIs.

Use cases

  • Onboarding screens
  • Splash screens
  • Background animations
  • Interactive UI elements
  • Visual storytelling

Key features

  • Cross-platform support
  • Customizable animation speed
  • Responsive layer movement
  • Simple API integration
  • Smooth performance

Suitable for

  • Designers seeking visual depth
  • Developers building engaging UIs
  • Apps with immersive onboarding
  • Creative digital experiences
  • Projects requiring layered backgrounds

Considerations

  • May impact performance on low-end devices
  • Requires careful tuning for optimal UX
  • Limited customization beyond basic parallax
  • Not suitable for complex interactive scenes
  • Best used with lightweight content

Original README

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

A Parallax effect package, Package is useful for animations for items in foreground, or background scrolling effect.

Features

  • Parallax movement with different stackable layers.
  • Supports 3 dimensional rotation.

image not available

Getting started

  1. Use Parallax widget for Configurations:
    • height: widget parent height
    • width: widget parent width
    • enableDrag: enables on click/tap movement
    • item: children of type ParallaxItem
  2. Use ParallaxItem widget for Configurations:
    • factor: ParallaxFactor(x,y)
    • alignment: initial alignment of child
    • rotationFactor: ParallaxFactor(x,y) for rotation
    • child: child

Usage

TODO: Include short and useful examples for package users. Add longer examples to /example folder.

class ParallaxExample extends StatefulWidget {
  const ParallaxExample({Key? key}) : super(key: key);

  @override
  State<ParallaxExample> createState() => _ParallaxState();
}

class _ParallaxState extends State<ParallaxExample>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Parallax(
        height: 400,
        width: 400,
        enableDrag: true,
        items: List.generate(5,(index)=>
        ParallaxItem(
            factor:ParallaxFactor(0.05*index,0.05*index),
            rotationFactor: ParallaxFactor(0,0.05*index),
            child: Container(
                height:50,
                width:50,
                color: Colors.green
            )
        )),
    );

Categories

Source repository

Projects using this package

No data available yet.