onboarding_anim 1.0.0

Una libreria para crear un onboarding de manera sencilla, y con una hermosa animación.

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: ^0.0.2

Example

In order to create onboarding we need a list of pages in this case we use a model PageModel

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 colors

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,
  )
)

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
    )
  )
)