flutter_overboard 3.1.1 icon indicating copy to clipboard operation
flutter_overboard: ^3.1.1 copied to clipboard

Onboarding widget for flutter to create beautiful on-boarding slides with minimal code.

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

126
likes
140
pub points
94%
popularity

Publisher

unverified uploader

Onboarding widget for flutter to create beautiful on-boarding slides with minimal code.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE, LICENSE.md)

Dependencies

flutter

More

Packages that depend on flutter_overboard