rezins / flutter_onboarding_slider

Recreate flutter_onboarding_slider

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.
• 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

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',
        finishButtonStyle: FinishButtonStyle(
          backgroundColor: Colors.black,
        ),
        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

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