Flutter Onboardings 15+ templates

Here is the settings example for Flutter Onboardings 15+ templates:

Step: Initial Settings

You have to initialize the onboarding component in your main method and then set the themeColor, skipButtonLabel and finishButtonLabel. And then set the skip method.

runApp(
  OnBoarding(
    themeColor: Colors.blue,
    skipButtonLabel: "Skip",
    finishButtonLabel: "Finish",
    skipCallback: skipOnboarding,
  )
)

Customize Onboarding

After that, you can go ahead and customize your Onboarding. You can change onboarding's background, primaryColor, and the navigation style.

OnBoarding(
  themeColor: Colors.teal,
  skipButtonLabel: "Skip",
  finishButtonLabel: "Finish",
  skipCallback: skipOnboarding,

  // Customize onboarding's background
  fullscreenBg: Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
      colors: [Colorsurple, Colors.purple, Colors.pink],
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
    ))
  ),

  // Define the primary color
  primaryColor: Colors.lightBlue,

  // Decide on the navigation style.
  navigationStyle: ArrowFill(
    arrowBodyColor: Colors.grey,

    // Customize the skip button
    skipContainer: Container(
      // Set the skip button elevation
      elevation: 0,
      // Text for the skip button text
      child: Align(
        alignment: Alignment.center,
        child: CustomText(
          "Next",
          color: Theme.of(context).primaryTextTheme.headline6.copyWith(color: Colors.white, fontSize: 20),

          // Set the align
          textAlign: TextAlign.center,
        ),
      ),
    ),
  )

  // Customize the confirm button
  confirmButtons: [
    OnboardConfirmButton(
      OnboardConfirmButtonBuilder.buildConfirmButton(
        style: OnboardConfirmButtonType.filled,
        onPress: () {
          routeOnboarding();
        }),
    ),
  ]
);

Adding Navigation

If you want more customization on the navigation step, you can set whether you want to go back if you click on the arrows, or if you press the skip button, change the onboarding navigationStyle to "arrowOnly.

Onboarding(
  themeColor: Colors.teal,
  skipButtonLabel: "Skip",
  finishButtonLabel: "Finish",
  skipCallback: () {
    Navigator.of(context).pop();
  }),
  navigationStyle: BackNavigationStyle(
    nextOnPress: true
  )
)

Onboarding's Image

If you want onboarding's image to become visible on the bottom it will not be cropped using this code.

Onboarding(
  themeColor: Colors(teal),
  skipButtonLabel: "Skip",
  finishButtonLabel: "Finish",
  finishCallback: () {
  Navigator.of(context).pushAndRemoveUntil(
              MaterialPageRoute(builder: (buildContext) => MyApp())));
  },
  //Customize onboarding's layout
  onboardingLayouts: [
    //  OnboardingLayout(
     //   //Background using an image
     Background(
       //BackgroundAsset: "assets/onboarding_img1.jpg",
     Container(
       //ColorCode for background
       backgroundColor: Colors.purple,

             // Set the alignment from top right
             mainAxisAlignment: MainAxisAlignment.end,
                 // Set the cross direction to main
            -crossAxisAlignment: CrossAxisAlignment.center,

       // Set the foreground image
       child:
       //Image(
               //  fit: BoxFit.fill,
               // assets/onboarding_img1.png),
     ),
   ]);
 ),

Confirmation Screen

If you just want to show the completion of the onboarding setup then you can add skip callback in the confirm part of the onboarding setting.

Confirm(
  confirmLabel:"Confirm",
  // set your confirmation callback here for when the user clicks Finish
  confirmCallback:(value) {
    Future.delayed(Duration(seconds: 1), () { // Simulate delay 1 second
      navigateToNextScreen(); });},
  // Custom child
  child: RichText(
    text: TextSpan(
      //  Set the color with Theme
      style: Theme.of(context).primaryTextTheme.headline1,
      text: '''
          Your onboarding have been successfully completed.''',
    ),
  ))

Finish/Cancel Buttons

Here I will give you a demo of finish and cancel Buttons in your onboarding pages.

Here are the features of the Flutter Onboardings 15+ templates:

1. Clean and robust code: The templates come with clean and robust code that is easy to understand and maintain.
2. Very easy to implement in your app: The templates are designed to be easy to implement in your app, with minimal effort required to get started.
3. Over 15+ templates to choose from: The package offers a wide range of templates to choose from, each with its own unique design and features.
4. Fluid animations: The templates include fluid animations that provide a smooth and engaging user experience.
5. Developer friendly experience: The package is designed to provide a developer-friendly experience, making it easy for developers to customize and extend the templates to meet their specific needs.