smooth_onboarding

pub package likes Buy Me a Coffee

A smooth, production-ready onboarding UI for Flutter apps.

Smooth animations. Simple API. Production-ready.

Build beautiful onboarding flows in minutes, with smooth animations and zero boilerplate.

Light Mode Dark Mode
Onboarding Preview Onboarding Preview Dark

Demo

See it in action: the example app uses built-in shapes and icons to stay lightweight while providing a sleek, smooth onboarding experience.

Why smooth_onboarding?

Most onboarding packages are either too basic or too rigid.

smooth_onboarding focuses on:

  • Clean, modern UI out of the box
  • Smooth, production-level animations
  • Simple API that integrates easily in real apps

Features

  • Animated progress bar with page-based progress
  • Optional back button that appears from the second page onward
  • Floating primary button that changes from Next to Get started on the last page
  • Built-in haptic feedback on primary and secondary actions
  • Per-page primary action callback for login, paywall, micro-setup, or notification flows
  • Per-page text-only secondary action for skippable steps like Salta
  • First-launch persistence via SharedPreferences
  • Dark mode aware default styling
  • Fully customizable page content with any widget
  • Customizable labels (next, done, back tooltip)
  • Optional back button toggle (showBackButton)
  • Configurable animation durations and progress semantics label
  • Configurable page transition style: horizontal slide, shared-axis, or fade
  • Modern completion animation that slides the whole screen upward
  • External reload trigger for programmatic onboarding reset

Installation

dependencies:
  smooth_onboarding: ^0.3.0

Usage

import 'package:flutter/material.dart';
import 'package:smooth_onboarding/smooth_onboarding.dart';

class AppRoot extends StatelessWidget {
  const AppRoot({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OnboardingGate(
        storageKey: OnboardingStorage.defaultStorageKey,
        pages: const [
          OnboardingPage(
            title: 'Welcome',
            body: Text('Discover the app in a few steps.'),
          ),
          OnboardingPage(
            title: 'Customize',
            body: Icon(Icons.palette_outlined, size: 72),
          ),
          OnboardingPage(
            title: 'Ready',
            body: Text('Initial setup is complete.'),
          ),
        ],
        child: const Scaffold(
          body: Center(child: Text('Main app content')),
        ),
      ),
    );
  }
}

If you want to control the first-launch check yourself, use OnboardingStorage:

final showOnboarding = await OnboardingStorage.shouldShowOnboarding();
if (showOnboarding) {
  // Show onboarding.
}

Customization

You can customize texts, colors and layout through page data, labels and theme:

OnboardingGate(
  pages: pages,
  showBackButton: true,
  nextButtonLabel: 'Next',
  doneButtonLabel: 'Get started',
  backButtonTooltip: 'Back',
  progressSemanticsLabel: 'Onboarding progress',
  progressAnimationDuration: const Duration(milliseconds: 360),
  contentAnimationDuration: const Duration(milliseconds: 300),
  contentAnimationCurve: Curves.easeOutCubic,
  pageTransitionType: OnboardingPageTransitionType.slideHorizontal,
  buttonLabelAnimationDuration: const Duration(milliseconds: 240),
  closeAnimationDuration: const Duration(milliseconds: 420),
  closeAnimationCurve: Curves.easeInCubic,
  theme: const OnboardingTheme(
    backgroundColor: Colors.white,
    progressColor: Colors.blue,
    buttonColor: Colors.blue,
    progressHeight: 8,
  ),
  child: const HomePage(),
)

Per-page custom CTA example (login with skip):

OnboardingPage(
  title: 'Salva tutto in sicurezza',
  body: const Text('Accedi per sincronizzare su tutti i dispositivi.'),
  buttonLabel: 'Continua con Google',
  secondaryButtonLabel: 'Salta',
  onPrimaryPressed: () async {
    // Trigger your Google sign-in flow.
  },
)

Per-page custom CTA example (enable notifications):

OnboardingPage(
  title: 'Get notified in time?',
  body: const Text('Enable notifications to receive reminders.'),
  buttonLabel: 'Enable notifications',
  onPrimaryPressed: () async {
    // Trigger your real notifications permission flow here.
  },
)

Reset and force the gate to re-check:

await OnboardingStorage.reset();
setState(() {
  reloadToken++;
});

Then pass reloadTrigger: reloadToken to OnboardingGate.

Example behavior

The package is designed around these defaults:

  • White background in light mode
  • Dark gray background in dark mode
  • Blue progress bar and blue primary button
  • Horizontal slide transitions between pages
  • Full-screen close animation that moves the onboarding upward
  • Small back arrow with a compact hit area

Used in production

This package is used in real Flutter applications.

Development

For local checks, run the usual Flutter commands from the package root:

flutter analyze
flutter test

Author

Created by Elia Zavatta.

I build production-ready Flutter apps and reusable UI components.

LLM and SEO keywords

Flutter onboarding, first launch flow, onboarding gate, onboarding persistence, animated onboarding pages, login onboarding, paywall onboarding, skippable onboarding.

License

MIT

Libraries

smooth_onboarding