flutter_onboarding_slider 1.0.1

A page slider with parallex design that allows (Text) widgets or body to slide at a different speed with background.

Flutter OnBoarding Slider

A page slider with parallex design that allows (Text) widgets or body to slide at a different speed with background.

Preview

Swipe

Touch swiping.

Slide

Swipe with the Floating Action Button.

Skip

Skip to last Slide.

Features

• Parralex design of the background that allows background to slide at a different speed.
• A bottom controller that indicates the current page.
• A bottom Floating Action Button in the end.
• A skip button on the top right with a final function.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_onboarding_slider:

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 PageSlider inside of a MaterialApp, optional parameters can be defined to enable different featiures. See the following example

class OnBoarding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: OnBoardingSlider(
        headerBackgroundColor: Colors.white,
        buttonText: 'Register',
        skipTextButton: Text('Skip'),
        finishButton: Text('Login'),
        background: [
          Image.asset('assets/slide_1.png'),
          Image.asset('assets/slide_2.png'),
        ],
        totalPage: 2,
        speed: 1.8,
        bodyHeight: 650,
        bodyWidth: 500,
        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'),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

---

Made with ❤ by Flutter team at Appinio GmbH