Flutter OnBoarding Slider is a Flutter package containing a page slider with parallex design that allows (Text) widgets or body to slide at a different speed with background. ✨

Supporting Android, iOS.


We build this package because we wanted to:

  • have parralex design of the background that allows background to slide at a different speed.
  • display with a bottom controller that indicates the current page.
  • trigger skip with a button on the top right with a final function.
  • NEW: you can use centerBackground property to center the background images. If you use this property imageHorizontalOffset property will get ignored.
  • NEW: You can use finishButtonStyle property to customize the finish button according to your design.

Show Cases


Touch swiping.


Swipe with the Floating Action Button.


Skip to last Slide.


Create a new project with the command

flutter create MyApp



to your pubspec.yaml of your flutter project. OR run

flutter pub add flutter_onboarding_slider

in your project's root directory.

In your library add the following import:

import 'package:flutter_onboarding_slider/flutter_onboarding_slider.dart';

For help getting started with Flutter, view the online documentation.


You can place your OnBoardingSlider inside of a Scaffold or CupertinoApp like we did here. Optional parameters can be defined to enable different features. See the following example..

class OnBoarding extends StatelessWidget {
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: OnBoardingSlider(
        headerBackgroundColor: Colors.white,
        finishButtonText: 'Register',
        finishButtonStyle: FinishButtonStyle(
          backgroundColor: Colors.black,
        skipTextButton: Text('Skip'),
        trailing: Text('Login'),
        background: [
        totalPage: 2,
        speed: 1.8,
        pageBodies: [
            padding: EdgeInsets.symmetric(horizontal: 40),
            child: Column(
              children: <Widget>[
                  height: 480,
                Text('Description Text 1'),
            padding: EdgeInsets.symmetric(horizontal: 40),
            child: Column(
              children: <Widget>[
                  height: 480,
                Text('Description Text 2'),



Parameter Default Description Required
headerBackgroundColor - color of the background false
finishButtonText - Text inside last pages bottom button false
skipTextButton - NavigationBar trailing widget when not on last screen false
trailing - NavigationBar trailing widget when on last screen false
background - List of Widgets to be shown in the backgrounds of the pages. For example a picture or some illustration true
totalPage - Number of total pages true
speed - The speed of the animation for the background true
pageBodies - The main content ont the screen displayed above the background true
centerBackground false This flag is used to center the background. false
finishButtonStyle - This property is used to customize the finish button. false

Made with ❤ by Flutter team at Appinio GmbH