GitLocker: The Coding Marketplace

Description:

flutter overboard

flutter_overboard #

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

Usage #
Add following command in your pubspec.yaml & install package
flutter_overboard:3.1.3
or run
flutter pub add flutter_overboard
Import in your dart page
import 'package:flutter_overboard/flutter_overboard.dart';
copied to clipboard
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),
];
copied to clipboard
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)
copied to clipboard
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
},
),
copied to clipboard
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);
copied to clipboard
To customize the text of buttons (Overboard Widget)
skipText: "Go Out",
nextText: "Go Forward",
finishText: "END",
copied to clipboard
To customize the color of buttons (Overboard Widget)
buttonColor: Colors.blue,
copied to clipboard
To customize the color of bullets (Overboard Widget)
activeBulletColor: Colors.white,
inactiveBulletColor: Colors.white30,
copied to clipboard
To customize the background of pages (Overboard Widget)
backgroundProvider: NetworkImage('https://picsum.photos/720/1280')
copied to clipboard
OR
backgroundProvider: ImageProvider('assets/images/bg.jpg')
copied to clipboard
To customize the color of page text (PageModel Widget)
titleColor: Colors.blue,
bodyColor: Colors.red,
copied to clipboard
To add the scroll support using keyboard & mouse wheel (Overboard Widget)
allowScroll: true,
copied to clipboard
Overboard Widget #

PROPERTY
TYPE
REQUIRED
DETAILS

pages
List
yes
List of pages to render on-boarding

center
Offset
no
Offset to set center point of revealing circle

showBullets
Boolean
no
Enable/disable bullets visibility

skipText
String
no
Customize skip button text

nextText
String
no
Customize next button text

finishText
String
no
Customize finish button text

buttonColor
Color
no
Customize button color

activeBulletColor
Color
no
Customize active bullet color

inactiveBulletColor
Color
no
Customize inactive bullet color

backgroundProvider
ImageProvider
no
Overboard background image provider

skipCallback
VoidCallback
no
Skip button click callback

finishCallback
VoidCallback
no
Finish button click callback

PageModel Widget #

PROPERTY
TYPE
REQUIRED
DETAILS

color
Color
no
Background color of the page

imageAssetPath
String
no
Image path from asset to show in page

title
String
no
Title text of the page

body
String
no
Body text of the page

child
Widget
no
Custom widget to pass as image in page

doAnimateChild
Boolean
yes
To enable/disable child animation

doAnimateImage
Boolean
yes
To enable/disable image animation

titleColor
Color
no
Change color of title text

bodyColor
Color
no
Change 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)
];
}
copied to clipboard
LICENSE #
MIT LICENSE