parallax_onboarding #

A parallax onboarding carousel for Flutter. Each page is built from up to three depth layers - background, content and foreground - that glide at their own speed as the user swipes, giving the flow a sense of depth. It ships with a page-indicator, skip / next / done controls, and first-class RTL and reduced-motion support, while still letting you drop down to a single parallax primitive when you want to build your own layout.

iOS	Android

Features #

• Layered parallax pages. Every OnboardingPage has a background, content and foreground slot, each with its own parallax factor so they drift at different speeds and read as depth. Any slot can be omitted.
• Batteries included. ParallaxOnboarding gives you paging, a smooth_page_indicator dot row, and animated skip / next / done controls out of the box - hand it a list of pages and listen with onDone / onSkip.
• First-class RTL. Horizontal motion mirrors automatically under TextDirection.rtl, so depth reads the same in both directions.
• Reduced motion. Honours MediaQueryData.disableAnimations and freezes the parallax (and snaps pages) when the platform asks for it; force it either way with reduceMotion.
• Listenable controller. ParallaxOnboardingController wraps a PageController and exposes safe next / previous / animateToPage navigation plus index, page, isFirst and isLast for custom buttons, deep links or analytics.
• Layered, extensible API. Use the high-level ParallaxOnboarding widget, swap the indicatorBuilder / controlsBuilder or shared background, or drop down to the ParallaxLayer primitive in your own PageView.

Getting started #

Add the dependency:

dependencies:
  parallax_onboarding: ^0.1.0

Then import it:

import 'package:parallax_onboarding/parallax_onboarding.dart';

Usage #

Hand ParallaxOnboarding a list of pages and react to completion:

ParallaxOnboarding(
  onDone: () => Navigator.of(context).pushReplacementNamed('/home'),
  onSkip: () => Navigator.of(context).pushReplacementNamed('/home'),
  pages: [
    OnboardingPage(
      background: const ColoredBox(color: Color(0xFF101820)),
      content: const Padding(
        padding: EdgeInsets.all(32),
        child: Text('Welcome', style: TextStyle(fontSize: 32)),
      ),
      foreground: const FlutterLogo(size: 160),
    ),
    OnboardingPage(
      background: const ColoredBox(color: Color(0xFF0E3A53)),
      content: const Padding(
        padding: EdgeInsets.all(32),
        child: Text('Swipe to explore', style: TextStyle(fontSize: 28)),
      ),
      foreground: const Icon(Icons.swipe, size: 160),
      foregroundFactor: 0.5,
    ),
  ],
)

Tuning depth #

Each slot has its own parallax factor: 0.0 pins the slot to the page, a positive value makes it lead the swipe (reading as near), and a negative value makes it trail (reading as far). The defaults are -0.2 for the background, 0.0 for the content and 0.35 for the foreground.

OnboardingPage(
  background: gradient,
  content: title,
  foreground: artwork,
  backgroundFactor: -0.35, // deep, drifts the other way
  foregroundFactor: 0.6,   // close, leads the swipe
  foregroundAlignment: Alignment.bottomRight,
)

Driving it yourself #

Pass a ParallaxOnboardingController to advance the flow from your own widgets, or to read the current page:

final controller = ParallaxOnboardingController();

ParallaxOnboarding(controller: controller, pages: pages);

// elsewhere
controller.next();
controller.animateToPage(2);
print(controller.index);

Customizing the chrome #

Replace the dots or the whole control bar, and paint a shared background behind every page:

ParallaxOnboarding(
  pages: pages,
  background: const DecoratedBox(
    decoration: BoxDecoration(
      gradient: LinearGradient(colors: [Color(0xFF2B3A67), Color(0xFF0B1026)]),
    ),
  ),
  indicatorBuilder: (context, controller) => MyDots(controller: controller),
  // controlsBuilder: (context, controller) => MyControls(controller: controller),
)

Extending #

For a hand-built layout, skip the high-level widget and use the ParallaxLayer primitive (or the pure parallaxOffset function) inside your own PageView:

AnimatedBuilder(
  animation: pageController,
  builder: (context, _) => ParallaxLayer(
    pageDelta: (pageController.page ?? 0) - index,
    factor: 0.4,
    extent: MediaQuery.sizeOf(context).width,
    child: const FlutterLogo(size: 160),
  ),
)

Additional information #

Issues and pull requests are welcome at https://github.com/NadeemIqbal/parallax_onboarding. See the example/ app for a runnable demo that auto-plays the parallax across four pages.