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.

Why?

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.

Show Cases

Swipe

Touch swiping.

Slide

Swipe with the Floating Action Button.

Skip

Skip to last Slide.

Installation

Create a new project with the command

flutter create MyApp

Add

dependencies:
  ...
  flutter_onboarding_slider:

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.

Usage

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 {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: OnBoardingSlider(
        headerBackgroundColor: Colors.white,
        finishButtonText: 'Register',
        skipTextButton: Text('Skip'),
        trailing: Text('Login'),
        background: [
          Image.asset('assets/slide_1.png'),
          Image.asset('assets/slide_2.png'),
        ],
        totalPage: 2,
        speed: 1.8,
        pageBodies: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 40),
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 480,
                ),
                Text('Description Text 1'),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 40),
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 480,
                ),
                Text('Description Text 2'),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Constructor

Basic

ParameterDefaultDescriptionRequired
headerBackgroundColor-color of the backgroundfalse
finishButtonText-Text inside last pages bottom buttonfalse
skipTextButton-NavigationBar trailing widget when not on last screenfalse
trailing-NavigationBar trailing widget when on last screenfalse
background-List of Widgets to be shown in the backgrounds of the pages. For example a picture or some illustrationtrue
totalPage-Number of total pagestrue
speed-The speed of the animation for the backgroundtrue
pageBodies-The main content ont the screen displayed above the backgroundtrue

Made with ❤ by Flutter team at Appinio GmbH

Libraries

background
background_body
background_controller
background_final_button
background_image
flutter_onboarding_slider
onboarding_navigation_bar
page_offset_provider