TutorialCoachMark

To change the launch screen image for the iOS version of your Flutter application, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a visual approach.

Using Xcode:

1. Open the iOS project in Xcode by running open ios/Runner.xcworkspace from your terminal.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog to replace the existing launch screen assets.

The TutorialCoachMark instance provides methods to control the tutorial flow manually:

• tutorial.skip(): Skips the tutorial.
• tutorial.finish(): Finishes the tutorial.
• tutorial.next(): Moves to the next target.
• tutorial.previous(): Moves to the previous target.
• tutorial.goTo(index): Jumps to a specific target by its index.

You can customize the skip button via the TutorialCoachMark constructor:

• textSkip: The label for the button (default: "SKIP").
• textStyleSkip: The TextStyle for the button text.
• alignSkip: The AlignmentGeometry on screen (default: Alignment.bottomRight).
• hideSkip: If true, the skip button is hidden.
• showSkipInLastTarget: Whether to show the skip button on the final target (default: true).
• skipWidget: A custom Widget to replace the default skip button.

If you do not have direct access to a BuildContext or need more granular control over where the tutorial is injected, use these alternative methods:

• showWithNavigatorStateKey({required GlobalKey<NavigatorState> navigatorKey, bool rootOverlay = false}): Uses a specific NavigatorState global key to find the overlay.
• showWithOverlayState({required OverlayState overlay, bool rootOverlay = false}): Directly uses a provided OverlayState to insert the tutorial.

// Using a Navigator Key
coachMark.showWithNavigatorStateKey(navigatorKey: myNavigatorKey);

// Using an Overlay State
coachMark.showWithOverlayState(overlay: myOverlayState);

Once a TutorialCoachMark is active, you can control its progression using the following methods:

• show({required BuildContext context, bool rootOverlay = false}): Displays the tutorial using the provided context.
• next(): Advances to the next target in the sequence.
• previous(): Returns to the previous target.
• goTo(int index): Jumps directly to a specific target by its zero-based index.
• skip(): Skips the tutorial (respects the onSkip callback logic).
• finish(): Ends the tutorial immediately and removes the overlay.
• isShowing: A getter that returns true if the tutorial is currently visible.

// Example of programmatic control
final coachMark = TutorialCoachMark(targets: myTargets);
coachMark.show(context: context);

// Later in your code...
coachMark.next();
coachMark.finish();

The TutorialCoachMark class provides several lifecycle and interaction callbacks:

The ContentTarget (referred to as TargetContent in code examples) class determines what is displayed and how it appears relative to the focused widget.

Attributes:

TargetContent(
  align: ContentAlign.bottom,
  child: Container(
    child: Text("Tutorial Content"),
  ),
)