Skip to content
App onboarding using an overlay that reveals certain widgets
Dart Objective-C Java
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib remove mediaquery as it may be called first build Mar 24, 2019


An onboarding method that gets the user straight into the app and doesn't require any splash screens.


  1. Create your List<OnboardSteps> somewhere accessible
    steps = [
          key: GlobalKey(),
          label: "Tap to increment & continue",
          //this sets the shape of the hole, defaults to a rounded rectangle
          shape: CircleBorder(),
          //if tappable is false, tapping will not proceed to next step
          tappable: false,
          //in this case, you must provide a stream to listen to for when to proceed
          //you can also specify a margin
          margin: EdgeInsets.all(8.0),
      OnboardStep(key: GlobalKey(), label: "Tap anywhere to continue."),
      OnboardStep(key: GlobalKey(), label: "Easy to customise"),
      OnboardStep(key: GlobalKey(), label: "Add steps for any widget"),
  1. Provide the GlobalKeys to the widgets. You could use GlobalValueKeys to avoid referencing the List<OnboardSteps>
        'You have pushed the button this many times:',
        key: steps[1].key,
  1. Add logic for the streams required to proceed, if you use this option

  2. Call onboard after the first build. The easiest way is to use the following in an initStat()

      .addPostFrameCallback((_) => onboard(steps, context));

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

You can’t perform that action at this time.