fancy onboarding
fancy onboarding screen library.
�� installation
in the dependencies: section of your pubspec.yaml, add the following line:
fancy_on_boarding: <latest_version>
❔ usage
import this class
import 'package:fancy_on_boarding/fancy_on_boarding.dart';
create a list of pagemodel
final pagelist = [
pagemodel(
color: const color(0xff678fb4),
heroimagepath: 'assets/png/hotels.png',
title: text('hotels',
style: textstyle(
fontweight: fontweight.w800,
color: colors.white,
fontsize: 34.0,
)),
body: text('all hotels and hostels are sorted by hospitality rating',
textalign: textalign.center,
style: textstyle(
color: colors.white,
fontsize: 18.0,
)),
iconimagepath: 'assets/png/key.png'),
pagemodel(
color: const color(0xff65b0b4),
heroimagepath: 'assets/png/banks.png',
title: text('banks',
style: textstyle(
fontweight: fontweight.w800,
color: colors.white,
fontsize: 34.0,
)),
body: text(
'we carefully verify all banks before adding them into the app',
textalign: textalign.center,
style: textstyle(
color: colors.white,
fontsize: 18.0,
)),
iconimagepath: 'assets/png/wallet.png'),
pagemodel(
color: const color(0xff9b90bc),
heroimagepath: 'assets/png/stores.png',
title: text('store',
style: textstyle(
fontweight: fontweight.w800,
color: colors.white,
fontsize: 34.0,
)),
body: text('all local stores are categorized for your convenience',
textalign: textalign.center,
style: textstyle(
color: colors.white,
fontsize: 18.0,
)),
icon: icon(
icons.shopping_cart,
color: const color(0xff9b90bc),
),
),
// svg pages example
pagemodel(
color: const color(0xff678fb4),
heroimagepath: 'assets/svg/hotel.svg',
title: text('hotels svg',
style: textstyle(
fontweight: fontweight.w800,
color: colors.white,
fontsize: 34.0,
)),
body: text('all hotels and hostels are sorted by hospitality rating',
textalign: textalign.center,
style: textstyle(
color: colors.white,
fontsize: 18.0,
)),
iconimagepath: 'assets/svg/key.svg',
heroimagecolor: colors.white),
pagemodel(
color: const color(0xff65b0b4),
heroimagepath: 'assets/svg/bank.svg',
title: text('banks svg',
style: textstyle(
fontweight: fontweight.w800,
color: colors.white,
fontsize: 34.0,
)),
body: text(
'we carefully verify all banks before adding them into the app',
textalign: textalign.center,
style: textstyle(
color: colors.white,
fontsize: 18.0,
)),
iconimagepath: 'assets/svg/cards.svg',
heroimagecolor: colors.white),
pagemodel(
color: const color(0xff9b90bc),
heroimagepath: 'assets/svg/store.svg',
title: text('store svg',
style: textstyle(
fontweight: fontweight.w800,
color: colors.white,
fontsize: 34.0,
)),
body: text('all local stores are categorized for your convenience',
textalign: textalign.center,
style: textstyle(
color: colors.white,
fontsize: 18.0,
)),
iconimagepath: 'assets/svg/cart.svg',
),
];
pass it into the fancy onboarding widget
@override
widget build(buildcontext context) {
return scaffold(
body: fancyonboarding(
donebuttontext: "done",
skipbuttontext: "skip",
pagelist: pagelist,
ondonebuttonpressed: () =>
navigator.of(context).pushreplacementnamed('/mainpage'),
onskipbuttonpressed: () =>
navigator.of(context).pushreplacementnamed('/mainpage'),
),
);
}
�� customization and attributes
fancy onboarding attributes
| attribute name | example value | description |
|---|---|---|
| pagelist | list<pagemodel> | the list of pages to be displayed |
| ondonebuttonpressed | (){} | function to be called on pressing done button |
| onskipbuttonpressed | (){} | function to be called on pressing skip button |
| donebuttontext | “let’s go” | done button text content defaults to “done” |
| skipbuttontext | “skip” | skip button text content defaults to “skip” |
| showskipbutton | true | skip button should be visible or not. defaults to true |
| bottommargin | 8.0 | indicator bottom margin. defaults to 8.0 |
| donebutton | button(onpressed:(){},child:text(‘done’)) | custom donebutton. will replace default donebutton if provided |
| skipbutton | button(onpressed:(){},child:text(‘skip’)) | custom skipbutton. will replace default donebutton if provided |
pagemodel attributes
| attribute name | example value | description |
|---|---|---|
| color | color(0xff65b0b4) | the background color of the page |
| heroassetpath | ‘assets/banks.png’ | the main onboarding image |
| heroassetcolor | color(0xff65b0b4) | main onboarding image color |
| title | text(‘banks’) | title of the page |
| body | text(‘we carefully verify all banks before adding them into the app’) | body of the page |
| iconassetpath | ‘assets/wallet.png’ | icon for the floating bubble |
| icon | icon(icons.shopping_cart) | icon for the floating bubble, will replace ‘iconassetpath’ if provided |
