A library to create an onboarding in a simple way, and with a beautiful animation.
You just need to add onboarding_anim
as a dependency in your pubspec.yaml file.
dependencies:
onboarding_anim: ^1.0.1
In order to create onboarding we need a list of pages in this case we use a model PageModel
dotsType: OnBoardingScreen.dotsDefault | dotsType: OnBoardingScreen.dotsLinearProgress |
---|---|
![]() |
![]() |
dotsType: OnBoardingScreen.dotsSmallLarge | dotsType: OnBoardingScreen.dotsSmallBig |
---|---|
![]() |
![]() |
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")),
)
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: PageDecoration(
pageColor: Colors.blue,
)
)
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),
)
)
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)),
);
Scaffold(
body: OnBoardingScreen (
pages: pages,
onDone: () => print("Done"),
onSkip: () => print("Skip")
)
)
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")
),
)
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
)
)
)