flutter_overboard

pub package

Onboarding widget for flutter to create beautiful onboarding slides with minimal code.

Demo

Example Gif

Usage

Add following command in your pubspec.yaml & install package

flutter_overboard:2.0.1

Import in your dart page

import 'package:flutter_overboard/flutter_overboard.dart';

Create a pages array like

    final pages = [
        new PageModel(
            color: const Color(0xFF0097A7),
            imageAssetPath: 'assets/01.png',
            title: 'Screen 1',
            body: 'Share your ideas with the team',
            doAnimateImage: true),
        new PageModel(
            color: const Color(0xFF536DFE),
            imageAssetPath: 'assets/02.png',
            title: 'Screen 2',
            body: 'See the increase in productivity & output',
            doAnimateImage: true),
        new PageModel(
            color: const Color(0xFF9B90BC),
            imageAssetPath: 'assets/03.png',
            title: 'Screen 3',
            body: 'Connect with the people from different places',
            doAnimateImage: true),
    ];

You can also pass widgets as page model

    PageModel.withChild(
        child: new Padding(
          padding: new EdgeInsets.only(bottom: 25.0),
          child: new Image.asset('assets/02.png', width: 300.0, height: 300.0),
        ),
        color: const Color(0xFF5886d6),
        doAnimateChild: true)

Add follwing in you dart code widget

    OverBoard(
        pages: pages,
        showBullets: true,
        skipCallback: () {
          // WRITE SKIP BUTTON ACTION HERE
        },
        finishCallback: () {
          // WRITE THE FINISH BUTTON ACTION HERE
        },
      ),

That's it. You are done with the setup now try to run your app.

To customize the circle reveal center point use (Overboard Widget)

    center: Offset(dx, dy);

To customize the text of buttons (Overboard Widget)

    skipText: "Go Out",
    nextText: "Go Forward",
    finishText: "END",

To customize the color of buttons (Overboard Widget)

    buttonColor: Colors.blue,

To customize the color of bullets (Overboard Widget)

    activeBulletColor: Colors.white,
    inactiveBulletColor: Colors.white30,

To customize the background of pages (Overboard Widget)

  backgroundProvider: NetworkImage('https://picsum.photos/720/1280')

OR

  backgroundProvider: ImageProvider('assets/images/bg.jpg')

To customize the color of page text (PageModel Widget)

    titleColor: Colors.blue,
    bodyColor: Colors.red,

To add the scroll support using keyboard & mouse wheel (Overboard Widget)

    allowScroll: true,

Overboard Widget

PROPERTYTYPEREQUIREDDETAILS
pagesListyesList of pages to render on-boarding
centerOffsetnoOffset to set center point of revealing circle
showBulletsBooleannoEnable/disable bullets visibility
skipTextStringnoCustomize skip button text
nextTextStringnoCustomize next button text
finishTextStringnoCustomize finish button text
buttonColorColornoCustomize button color
activeBulletColorColornoCustomize active bullet color
inactiveBulletColorColornoCustomize inactive bullet color
backgroundProviderImageProvidernoOverboard background image provider
skipCallbackVoidCallbacknoSkip button click callback
finishCallbackVoidCallbacknoFinish button click callback

PageModel Widget

PROPERTYTYPEREQUIREDDETAILS
colorColornoBackground color of the page
imageAssetPathStringnoImage path from asset to show in page
titleStringnoTitle text of the page
bodyStringnoBody text of the page
childWidgetnoCustom widget to pass as image in page
doAnimateChildBooleanyesTo enable/disable child animation
doAnimateImageBooleanyesTo enable/disable image animation
titleColorColornoChange color of title text
bodyColorColornoChange color of body text

Example

import 'package:flutter/material.dart';

import 'package:flutter_overboard/flutter_overboard.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Overboard Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ScaffoldState> _globalKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      body: OverBoard(
        pages: pages,
        showBullets: true,
        skipCallback: () {
          _globalKey.currentState.showSnackBar(SnackBar(
            content: Text("Skip clicked"),
          ));
        },
        finishCallback: () {
          _globalKey.currentState.showSnackBar(SnackBar(
            content: Text("Finish clicked"),
          ));
        },
      ),
    );
  }

  final pages = [
        PageModel(
            color: const Color(0xFF0097A7),
            imageAssetPath: 'assets/01.png',
            title: 'Screen 1',
            body: 'Share your ideas with the team',
            doAnimateImage: true),
        PageModel(
            color: const Color(0xFF536DFE),
            imageAssetPath: 'assets/02.png',
            title: 'Screen 2',
            body: 'See the increase in productivity & output',
            doAnimateImage: true),
        PageModel(
            color: const Color(0xFF9B90BC),
            imageAssetPath: 'assets/03.png',
            title: 'Screen 3',
            body: 'Connect with the people from different places',
            doAnimateImage: true),
        PageModel.withChild(
            child: Padding(
              padding: EdgeInsets.only(bottom: 25.0),
              child: Image.asset('assets/02.png', width: 300.0, height: 300.0),
            ),
            color: const Color(0xFF5886d6),
            doAnimateChild: true)
  ];
}

LICENSE

MIT LICENSE

Libraries

flutter_overboard