A Fancy OnBoarding Screen Library for Easy and Quick Usage.
In the dependencies:
section of your pubspec.yaml
, add the following line:
fancy_on_boarding: <latest_version>
import 'package:fancy_on_boarding/fancy_on_boarding.dart';
final pageList = [
PageModel(
color: const Color(0xFF678FB4),
heroAssetPath: 'assets/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,
)),
iconAssetPath: 'assets/key.png'),
PageModel(
color: const Color(0xFF65B0B4),
heroAssetPath: 'assets/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,
)),
iconAssetPath: 'assets/wallet.png'),
PageModel(
color: const Color(0xFF9B90BC),
heroAssetPath: 'assets/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,
)),
iconAssetPath: 'assets/shopping_cart.png',
),
];
@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'),
),
);
}
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 |
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 |
Author: xsahil03x
Source Code: https://github.com/xsahil03x/fancy_on_boarding
#flutter #dart #mobile-apps