ivirtex/cupertino_onboarding

Flutter package that provides a beautiful, iOS-like, easy onboarding experience with minimal code.

cupertino_onboarding

Flutter package that provides a beautiful, iOS-like, easy onboarding experience with minimal code.

It's designed to easily showcase your app's features and provide a simple way for users to learn about your app.

Getting Started

Add the package to your pubspec.yaml file:

cupertino_onboarding: ^1.2.0

Import the library:

import 'package:cupertino_onboarding/cupertino_onboarding.dart';

Create CupertinoOnboarding widget and pass your pages as parameter:

@override
Widget build(BuildContext context) {
  return CupertinoOnboarding(
    onPressedOnLastPage: () => Navigator.pop(context),
    pages: [
      // To create What's New page like Calendar or Translator
      // examples in the readme, use `WhatsNewPage` widget:

      // Actual code from the Calendar example:
      WhatsNewPage(
        title: const Text("What's New in Calendar"),
        features: [
          // Feature's type must be `WhatsNewFeature`
          WhatsNewFeature(
            icon: Icon(
              CupertinoIcons.mail,
              color: CupertinoColors.systemRed.resolveFrom(context),
            ),
            title: const Text('Found Events'),
            description: const Text(
              'Siri suggests events found in Mail, Messages, and Safari, so you can add them easily, such as flight reservations and hotel bookings.',
            ),
          ),
          WhatsNewFeature(
            icon: Icon(
              CupertinoIcons.time,
              color: CupertinoColors.systemRed.resolveFrom(context),
            ),
            title: const Text('Time to Leave'),
            description: const Text(
              "Calendar uses Apple Maps to look up locations, traffic conditions, and transit options to tell you when it's time to leave.",
            ),
          ),
        ],
      ),

      // To create custom onboarding page, use
      // `CupertinoOnboardingPage` widget:

      // Actual code from the GIF example:
      const CupertinoOnboardingPage(
        title: Text('Support For Multiple Pages'),
        body: Icon(
          CupertinoIcons.square_stack_3d_down_right,
          size: 200,
        ),
      ),
      const CupertinoOnboardingPage(
        title: Text('Great Look in Light and Dark Mode'),
        body: Icon(
          CupertinoIcons.sun_max,
          size: 200,
        ),
      ),
    ],
  );
}

CupertinoOnboarding can be shown as any other widget, but to match native feel, consider using modal_bottom_sheet package or other modal view.

See API reference for more information about customizing look and feel of the onboarding.

Features, bugs and contributions

Feel free to contribute to this project.

Please file feature requests and bugs at the issue tracker.
If you fixed a bug or implemented a feature by yourself, feel free to send a pull request.

Sponsoring

I am working on my packages in my free time.

If this package is helping you, please consider buying me a coffee, so I can keep updating and maintaining this package.

cupertino_onboarding's Issues

On last screen, update bottomButton text to something else

Usually, if there is "Continue" on bottomButton, on the last slide/page, we should be able to change bottomButton text to something else, for example, "Get Started". I think it is a common functionality and should be included. If there is a way to do this, let me know. Thanks!

Bottom button still appears gray even if bottomButtonColor field is specified

this is my code:

      bottomButtonColor: Colors.blue,
      pages: [
        CupertinoOnboardingPage(
          title: const Column(
            children: [
              Text(
                '登录以开启',
                style: AppStyles.titleLarge,
              ),
              Text(
                '学习之旅',
                style: AppStyles.titleLarge,
              ),
            ],
          ),
          body: ListView.separated(
            physics: const BouncingScrollPhysics(),
            separatorBuilder: (_, __) => const SizedBox(height: 25),
            itemCount: 2,
            itemBuilder: (context, index) {
              return features[index];
            },
          ),
        ),
      ],
    [);```

run the app and the page looks like:
![屏幕截图 2024-04-02 210419](https://github.com/ivirtex/cupertino_onboarding/assets/113110433/047045e4-a0d4-4965-959e-e0b80cbbccdc)

Bug in `onPressedOnLastPage` method causing app to go blank on double-click or unexpected behavior

Description:

The onPressedOnLastPage method in the Cupertino Onboarding library has a bug where if the user accidentally clicks the final continue button twice before it goes away, the app may go blank. This issue arises when Navigator.pop(context); is used and it pops beyond the root navigation, resulting in unexpected behavior.

Expected Behavior:

The final continue button should only be clickable once, and subsequent clicks should not trigger the onPressedOnLastPage function.

Workaround:

A workaround for users trying to pop to the "home" state is to use Navigator.of(context).popUntil((route) => route.isFirst);. However, this workaround may not cover all custom logic, especially when the requirement is to pop to a specific index or page.

Proposed Solution:

The library should be updated to handle the case where the final continue button can only be clicked once. Subsequent clicks should not trigger the onPressedOnLastPage function. This will prevent the app from going blank when using Navigator.pop(context);.

Reproduce

Make a onPressedOnLastPage with a Navigator.pop(context); and click the button more than once before it leaves the screen.