onboarding_anim 
A library to create an onboarding in a simple way, and with a beautiful animation.
Installation
You just need to add onboarding_anim as a dependency in your pubspec.yaml file.
dependencies:
onboarding_anim: ^1.0.1Example
In order to create onboarding we need a list of pages in this case we use a model PageModel
Dots Example
| dotsType: OnBoardingScreen.dotsDefault | dotsType: OnBoardingScreen.dotsLinearProgress |
|---|---|
 |
 |
| dotsType: OnBoardingScreen.dotsSmallLarge | dotsType: OnBoardingScreen.dotsSmallBig |
|---|---|
 |
 |
PageModel
Simple page
This example only define title, body and an image (you can define any widget)
PageModel(
title: "Relax",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
image: Image(image: NetworkImage("https://i-love-png.com/images/kraken_body03_final_01.png")),
)Page with custom text style
PageModel(
title: "Relax",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
image: Image(image: NetworkImage("https://i-love-png.com/images/kraken_body03_final_01.png")),
decoration: const PageDecoration(
titleTextStyle: TextStyle(color: Colors.orange),
bodyTextStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 20.0),
)
)Page with widget body
This example show you how to define a page with a body as Widget and not a simple String
You can to the same this for title, with titleWidget parameter.
PageModel(
title: "Relax",
bodyWidget: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text("Click on "),
Icon(Icons.edit),
Text(" to edit a post"),
],
),
image: Center(child: Icon(Icons.android)),
);OnboardingScreen Default
Scaffold(
body: OnBoardingScreen (
pages: pages,
onDone: () => print("Done"),
onSkip: () => print("Skip")
)
)OnboardingScreen with Decoration
Scaffold(
body: OnBoardingScreen (
onboardingDecoration: OnboardingDecoration(
aling: Alignment.topCenter,
child: Image(
image: NetworkImage("https://www.themexpert.com/images/easyblog_articles/531/b2ap3_large_Mountains.PNG"),
width: MediaQuery.of(context).size.width,
)
),
pages: pages,
onDone: () => print("Done"),
onSkip: () => print("Skip")
),
)Custom Colors Indicators
Scaffold(
body: OnBoardingScreen (
onboardingDecoration: OnboardingDecoration(
aling: Alignment.topCenter,
child: Image(
image: NetworkImage("https://www.themexpert.com/images/easyblog_articles/531/b2ap3_large_Mountains.PNG"),
width: MediaQuery.of(context).size.width,
)
),
pages: pages,
onDone: () => print("Done"),
onSkip: () => print("Skip"),
indicatorDecoration: IndicatorDecoration(
active: Colors.red,
inactive: Colors.blueGrey,
shadow: Colors.blue
)
)
)
