cmx_onboarding

A highly customizable Flutter onboarding package with 16 built-in UI templates, themeable indicators and buttons, per-page styling, full controller support, and a dead-simple API.

Features

16 production-ready templates — classic, parallax, fade, zoom, card-stack, split-screen, fullscreen, minimal, glassmorphism, story, slide-up, lottie, editorial, vibrant, pastel, darkPro
6 indicator styles + a "none" option — dots, expanding dots, worm, lines, numeric (1 / 4), avatar group
Programmatic navigation via OnboardController (next(), previous(), jumpTo(), animateToPage())
Auto-play with optional loop
Per-page customization — solid color / gradient / image backgrounds, title style, description style, image widget
RTL aware (uses ambient Directionality)
Pure Dart/Flutter — works on Android, iOS, web, and desktop
Lottie animation support out of the box

Install

dependencies:
  cmx_onboarding: ^0.0.1

Quick start

import 'package:cmx_onboarding/cmx_onboarding.dart';

Onboardly(
  template: OnboardTemplate.classic,
  pages: const [
    OnboardPage(
      title: 'Welcome',
      description: 'Your app, your way.',
      image: Icon(Icons.explore, size: 120, color: Colors.white),
      backgroundColor: Color(0xFF6750A4),
    ),
    OnboardPage(
      title: 'Connect',
      description: 'Find people who care about the same things you do.',
      image: Icon(Icons.people, size: 120, color: Colors.white),
      backgroundColor: Color(0xFF1E88E5),
    ),
  ],
  onDone: () => Navigator.of(context).pushReplacementNamed('/home'),
)

With a controller

final controller = OnboardController();

Onboardly(
  template: OnboardTemplate.parallax,
  controller: controller,
  indicatorType: OnboardIndicatorType.expandingDot,
  activeColor: Colors.deepPurple,
  inactiveColor: Colors.grey,
  pages: pages,
  onDone: () {},
  onSkip: () {},
  onPageChanged: (i) => print('on page $i'),
);

// Later, from anywhere:
controller.next();
controller.jumpTo(2);
controller.startAutoPlay(const Duration(seconds: 3));

Templates

Template	Best for
`OnboardTemplate.classic`	Image top, text bottom — the safe default
`OnboardTemplate.parallax`	Adding depth without extra assets
`OnboardTemplate.fade`	Distraction-free, no swipe gesture
`OnboardTemplate.zoom`	Hero illustrations with focus
`OnboardTemplate.cardStack`	Card-based content
`OnboardTemplate.splitScreen`	Hero photo + white text panel
`OnboardTemplate.fullscreen`	Full-bleed photography
`OnboardTemplate.minimal`	Icon + headline only
`OnboardTemplate.glassmorphism`	Modern, colorful gradient UIs
`OnboardTemplate.story`	Instagram-style auto progress
`OnboardTemplate.slideUp`	Static hero, animated text
`OnboardTemplate.lottie`	Lottie animation per page
`OnboardTemplate.editorial`	Bold left-aligned headline + tilted card
`OnboardTemplate.vibrant`	Solid bold color, mascot, full-width pill
`OnboardTemplate.pastel`	Pastel bg, avatars, square arrow CTA
`OnboardTemplate.darkPro`	Dark, dual CTA (sign in + get started)

Indicators

Type	Looks like
`OnboardIndicatorType.dot`	● ○ ○ ○
`OnboardIndicatorType.expandingDot`	▬ ○ ○ ○
`OnboardIndicatorType.worm`	stretching active dot
`OnboardIndicatorType.line`	▭ ▫ ▫ ▫
`OnboardIndicatorType.number`	`2 / 4`
`OnboardIndicatorType.avatarGroup`	overlapping avatars
`OnboardIndicatorType.none`	(hidden)

Example app

Check out example/ for a gallery of every template.

License

MIT