CINXE.COM

<!DOCTYPE html> <html lang="en-us"><head><script src="https://www.googletagmanager.com/gtm.js?id=GTM-MX6DBN9" async="async"></script><script src="/static/hash-mh7qv2oc/js/gtm.js" async="async"></script><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="robots" content="noindex"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@dart_lang"/><meta name="twitter:description" content="A library that makes it easy for you to create your custom wizard. You'll have 100% control over the appearance of your wizard."/><meta name="twitter:image" content="https://pub.dev/static/hash-mh7qv2oc/img/pub-dev-icon-cover-image.png"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Dart packages"/><meta property="og:title" content="flutter_wizard | Flutter package"/><meta property="og:description" content="A library that makes it easy for you to create your custom wizard. You'll have 100% control over the appearance of your wizard."/><meta property="og:image" content="https://pub.dev/static/hash-mh7qv2oc/img/pub-dev-icon-cover-image.png"/><title>flutter_wizard | Flutter package</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400&family=Google+Sans+Text:wght@400;500;700&family=Google+Sans+Mono:wght@400;700&display=swap"/><link rel="shortcut icon" href="/static/hash-mh7qv2oc/img/flutter-logo-32x32.png"/><meta rel="apple-touch-icon" href="/static/hash-mh7qv2oc/img/flutter-logo-32x32.png"/><meta rel="apple-touch-icon-precomposed" href="/static/hash-mh7qv2oc/img/flutter-logo-32x32.png"/><link rel="stylesheet" href="https://www.gstatic.com/glue/v25_0/ccb.min.css"/><link rel="search" type="application/opensearchdescription+xml" title="Dart packages" href="/osd.xml"/><link rel="canonical" href="https://pub.dev/packages/flutter_wizard"/><meta name="description" content="A library that makes it easy for you to create your custom wizard. You'll have 100% control over the appearance of your wizard."/><link rel="alternate" type="application/atom+xml" title="Updated Packages Feed for Pub" href="/feed.atom"/><link rel="stylesheet" type="text/css" href="/static/hash-mh7qv2oc/material/bundle/styles.css"/><link rel="stylesheet" type="text/css" href="/static/hash-mh7qv2oc/css/style.css"/><script src="/static/hash-mh7qv2oc/material/bundle/script.min.js" defer="defer"></script><script src="/static/hash-mh7qv2oc/js/script.dart.js" defer="defer"></script><script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script><meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJmbHV0dGVyX3dpemFyZCIsInZlcnNpb24iOiIyLjAuNSIsImxpa2VzIjo4MiwicHVibGlzaGVySWQiOiJiYXNlZmxvdy5jb20iLCJpc0Rpc2NvbnRpbnVlZCI6ZmFsc2UsImlzTGF0ZXN0Ijp0cnVlfSwic2Vzc2lvbkF3YXJlIjpmYWxzZX0="/><link rel="preload" href="/static/hash-mh7qv2oc/highlight/highlight-with-init.js" as="script"/></head><body class="light-theme"><script src="/static/hash-mh7qv2oc/js/dark-init.js"></script><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div class="site-header"><button class="hamburger" aria-label="menu toggle"></button><a class="logo" href="/" aria-label="Go to the landing page of pub.dev"><img class="site-logo" src="/static/hash-mh7qv2oc/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/></a><div class="site-header-space"></div><div class="site-header-mask"></div><div class="site-header-search"><form action="/packages" method="GET"><input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/></form></div><nav class="site-header-nav scroll-container"><div class="nav-login-container"><button id="-account-login" class="nav-main-button link">Sign in</button></div><div class="nav-container nav-help-container hoverable"><button class="nav-main-button">Help</button><div class="nav-hover-popup"><div class="nav-table-columns"><div class="nav-table-column"><h3>pub.dev</h3><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div><div class="nav-table-column"><h3>Flutter</h3><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div><div class="nav-table-column"><h3>Dart</h3><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">pub.dev <img class="foldable-icon" src="/static/hash-mh7qv2oc/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Flutter <img class="foldable-icon" src="/static/hash-mh7qv2oc/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Dart <img class="foldable-icon" src="/static/hash-mh7qv2oc/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></nav><button class="-pub-theme-toggle" aria-label="light/dark theme toggle"></button></div><div id="banner-container"></div><main class="container"><div class="detail-wrapper -active -has-info-box"><div class="detail-header -is-loose"><div class="detail-container"><div class="detail-header-outer-block"><div class="detail-header-content-block"><h1 class="title pub-monochrome-icon-hoverable">flutter_wizard 2.0.5 <span class="pkg-page-title-copy"><img class="pub-monochrome-icon pkg-page-title-copy-icon filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/content-copy-icon.svg" alt="copy "flutter_wizard: ^2.0.5" to clipboard" width="18" height="18" title="Copy "flutter_wizard: ^2.0.5" to clipboard" data-copy-content="flutter_wizard: ^2.0.5" data-ga-click-event="copy-package-version"/><div class="pkg-page-title-copy-feedback"><span class="code">flutter_wizard: ^2.0.5</span> copied to clipboard</div></span></h1><div class="metadata">Published <span><a class="-x-ago" href="" title="May 24, 2022" role="button" data-timestamp="1653376612770">2 years ago</a></span> • <a class="-pub-publisher" href="/publishers/baseflow.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>baseflow.com</a><span class="package-badge" title="Package is compatible with Dart 3.">Dart 3 compatible</span></div><div class="detail-tags-and-like"><div class="detail-tags"><div class="-pub-tag-badge"><span class="tag-badge-main">SDK</span><a class="tag-badge-sub" href="/packages?q=sdk%3Aflutter" rel="nofollow" title="Packages compatible with Flutter SDK">Flutter</a></div><div class="-pub-tag-badge"><span class="tag-badge-main">Platform</span><a class="tag-badge-sub" href="/packages?q=platform%3Aandroid" rel="nofollow" title="Packages compatible with Android platform">Android</a><a class="tag-badge-sub" href="/packages?q=platform%3Aios" rel="nofollow" title="Packages compatible with iOS platform">iOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Alinux" rel="nofollow" title="Packages compatible with Linux platform">Linux</a><a class="tag-badge-sub" href="/packages?q=platform%3Amacos" rel="nofollow" title="Packages compatible with macOS platform">macOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Aweb" rel="nofollow" title="Packages compatible with Web platform">web</a><a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a></div></div><div class="detail-like"><button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package"><img class="mdc-icon-button__icon" src="/static/hash-mh7qv2oc/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/><img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-mh7qv2oc/img/like-active.svg" alt="liked status: active" width="18" height="18"/></button><span class="likes-count"><span id="likes-count">82</span></span></div></div></div></div></div></div><div class="detail-container"><div class="detail-lead"><div class="detail-metadata-toggle"><div class="detail-metadata-toggle-icon">→</div><h3 class="detail-lead-title">Metadata</h3></div><p class="detail-lead-text">A library that makes it easy for you to create your custom wizard. You'll have 100% control over the appearance of your wizard.</p><p class="detail-lead-more"><a class="detail-metadata-toggle">More...</a></p></div></div><div class="detail-body"><div class="detail-tabs"><div class="detail-tabs-wide-header"><div class="detail-container"><ul class="detail-tabs-header"><li class="detail-tab tab-button detail-tab-readme-title -active">Readme</li><li class="detail-tab tab-link detail-tab-changelog-title"><a href="/packages/flutter_wizard/changelog" role="button">Changelog</a></li><li class="detail-tab tab-link detail-tab-example-title"><a href="/packages/flutter_wizard/example" role="button">Example</a></li><li class="detail-tab tab-link detail-tab-installing-title"><a href="/packages/flutter_wizard/install" role="button">Installing</a></li><li class="detail-tab tab-link detail-tab-versions-title"><a href="/packages/flutter_wizard/versions" role="button">Versions</a></li><li class="detail-tab tab-link detail-tab-analysis-title"><a href="/packages/flutter_wizard/score" role="button">Scores</a></li></ul></div></div><div class="detail-container detail-body-main"><div class="detail-tabs-content"><section class="tab-content detail-tab-readme-content -active markdown-body"><h1 id="flutter-wizard" class="hash-header">Flutter Wizard <a href="#flutter-wizard" class="hash-link">#</a></h1> <h2 id="author-jop-middelkamphttpsgithubcomjopmiddelkamp" class="hash-header">Author: <a href="https://github.com/jopmiddelkamp" rel="ugc">Jop Middelkamp</a> <a href="#author-jop-middelkamphttpsgithubcomjopmiddelkamp" class="hash-link">#</a></h2> <p>A library that makes it easy for you to create your custom wizard. You'll have 100% control over the appearance of your wizard.</p> <p><img src="https://user-images.githubusercontent.com/1774351/140836023-f0e7888b-a947-4f72-9b71-19756bda6f0f.gif" alt="Responsive wizard example"></p> <h1 id="how-to-use" class="hash-header">How to use <a href="#how-to-use" class="hash-link">#</a></h1> <p>In this chapter I'll explain to you how you could use the <code>flutter_wizard</code> package to create you own custom wizard.</p> <ul> <li><a href="#wrapping-your-widget-with-a-wizard-controller">Wrapping your widget with a wizard controller</a></li> <li><a href="#step-state-management">Step state management</a></li> <li><a href="#determine-the-widgets-to-show-for-each-step">Determine the widgets to show for each step</a></li> <li><a href="#custom-widget-interaction-with-the-wizard">Custom widget interaction with the wizard</a></li> <li><a href="#how-to-act-on-wizard-events">How to act on wizard events</a></li> </ul> <h2 id="wrapping-your-widget-with-a-wizard-controller" class="hash-header">Wrapping your widget with a wizard controller <a href="#wrapping-your-widget-with-a-wizard-controller" class="hash-link">#</a></h2> <p>To start you've to wrap all of your wizard components with the <code>DefaultWizardController</code> which could receive a couple of arguments.</p> <p><strong>stepController (required)</strong><br> <em>A list of <code>WizardStepController</code>s, more details will be described in one of the following chapters.</em></p> <p><em><strong>IMPORTANT:</strong></em> <em>The order of the <code>stepControllers</code> reflects to the order of the steps as displayed in the <code>Wizard</code> widget.</em></p> <p><strong>initialIndex</strong><br> <em>The initial of the initial step to display.</em></p> <p><strong>onStepChanged</strong><br> <em>A callback that gets triggered when the step changes.</em></p> <p><strong>onControllerCreated</strong><br> <em>A callback that gets triggered when the [WizardController] is created.</em></p> <p><strong>child (required)</strong><br> <em>The child widget of the <code>DefaultWizardController</code>. This widget (or one of its children) should contain all the widgets that need to interact with the <code>Wizard</code> widget. The reason for this is that all widgets under the <code>DefaultWizardController</code> are able to get the <code>WizardController</code> by calling the <code>WizardController.of(context)</code> or the provided extension <code>context.wizardController</code>.</em></p> <p>Example:</p> <pre><code class="language-dart">DefaultWizardController( stepControllers: [ WizardStepController( step: provider.stepOneProvider, ), WizardStepController( step: provider.stepTwoProvider, isNextEnabled: false, ), WizardStepController( step: provider.stepThreeProvider, ), ... ], child: Column( children: [ ProgressIndicator(), Expanded( child: Wizard( ... ), ), ActionBar(), ], ), ); </code></pre> <p>In this example above the <code>ProgressIndicator</code>, <code>Wizard</code>, and <code>ActionBar</code> all have access to the <code>WizardController</code> because they are wrapped inside of the <code>DefaultWizardController</code>.</p> <h2 id="step-state-management" class="hash-header">Step state management <a href="#step-state-management" class="hash-link">#</a></h2> <p>As described in the last chapter you can provide the <code>DefaultWizardController</code> with <code>stepControllers</code>. This argument expects a list of <code>WizardStepController</code>s. These step controllers need to be provided a step state. This step state could be a bloc, cubit, provider, notifier, etc. The only thing you are required to do is mixin the <code>WizardStep</code> into your statemanaged object.</p> <p>When mixin the <code>WizardStep</code> your statemanaged object will be extended with the following properties and methods.</p> <p><strong>wizardController</strong><br> <em>A property that contains the <code>WizardController</code>.</em></p> <p><strong>onControllerReceived</strong><br> <em>A callback that gets fired when the <code>wizardController</code> property has been set. This callback will receive the <code>WizardController</code> as an argument.</em></p> <p><strong>onShowing</strong><br> <em>A callback that triggeres when the step has started showing.</em></p> <p><strong>onShowingCompleted</strong><br> <em>A callback that triggeres when the step has completed showing.</em></p> <p><strong>onHiding</strong><br> <em>A callback that triggers when the step has started hiding.</em></p> <p><strong>onHidingCompleted</strong><br> <em>A callback that triggers when the step has completed hiding.</em></p> <p>Provider example:</p> <pre><code class="language-dart">class StepOneProvider with WizardStep { StepOneProvider(); final _description = BehaviorSubject<String>.seeded(''); final descriptionFocusNode = FocusNode(); final descriptionTextController = TextEditingController(); String get description { return _description.value; } @override Future<void> onShowing() async { if (_description.value.isEmpty) { descriptionFocusNode.requestFocus(); } } @override Future<void> onHiding() async { if (descriptionFocusNode.hasFocus) { descriptionFocusNode.unfocus(); } } void updateDescription(String description) { _description.add(description); } void dispose() { descriptionTextController.dispose(); } } </code></pre> <h2 id="determine-the-widgets-to-show-for-each-step" class="hash-header">Determine the widgets to show for each step <a href="#determine-the-widgets-to-show-for-each-step" class="hash-link">#</a></h2> <p>Now with the <code>DefaultWizardController</code> setup it's time to setup the widgets to show for eacht step.</p> <p>We are going to need to <code>Wizard</code> widget for this. This widget contains only one arguments.</p> <p><strong>stepBuilder</strong><br> <em>The builder method to build the steps corresponding widget. The builder method provides you with a <code>BuildContext</code> and a wizard step state. The wizard step state is the object in which you've mixed the <code>WizardStep</code>. This could be your bloc, cubit, provider, notifier, etc. Then based on the class type of the state you can determine the widget to show and pass the state into this widget to display the state to the user.</em></p> <p>Example:</p> <pre><code class="language-dart">Wizard( stepBuilder: (context, state) { if (state is StepOneProvider) { return StepOne( provider: state, ); } if (state is StepTwoProvider) { return StepTwo( provider: state, ); } if (state is StepThreeProvider) { return StepThree( provider: state, ); } return Container(); }, ); </code></pre> <h2 id="custom-widget-interaction-with-the-wizard" class="hash-header">Custom widget interaction with the wizard <a href="#custom-widget-interaction-with-the-wizard" class="hash-link">#</a></h2> <p>Now let me explain to you how you could make your own custom widgets and how you could make them interact with the <code>Wizard</code> widget.</p> <p>So you could create your own widget the same way like you create every other widget. Then in your widget you can get the <code>WizardController</code> by calling the <code>WizardController.of(context)</code> or the provided extension <code>context.wizardController</code>.</p> <p>With the <code>WizardController</code> you can interact with the <code>Wizard</code> widget. The <code>WizardController</code> contains the following properties and methods to control the widget or receive information about its state.</p> <p><strong>eventStream</strong><br> <em>Streams the events that happen on the <code>WizardController</code>. The events have a base type of <code>WizardEvent</code> and can be casted to the specific event type. The events are:</em></p> <ul> <li><em><code>WizardEnableGoBackEvent</code>: Triggered when <code>enableGoBack</code> is called.</em></li> <li><em><code>WizardEnableGoNextEvent</code>: Triggered when <code>enableGoNext</code> is called.</em></li> <li><em><code>WizardDisableGoBackEvent</code>: Triggered when <code>disableGoBack</code> is called.</em></li> <li><em><code>WizardDisableGoNextEvent</code>: Triggered when <code>disableGoNext</code> is called.</em></li> <li><em><code>WizardGoNextEvent</code>: Triggered when <code>goNext</code> is called.</em></li> <li><em><code>WizardGoBackEvent</code>: Triggered when <code>goBack</code> is called.</em></li> <li><em><code>WizardGoToEvent</code>: Triggered when <code>goTo</code> is called.</em></li> <li><em><code>WizardForcedGoBackToEvent</code>: Triggered when <code>disableGoNext</code> is called with an index lower as the current index.</em></li> </ul> <p><strong>stepControllers</strong><br> <em>A list of the <code>WizardStepController</code>s.</em></p> <p><strong>stepCount</strong><br> <em>The step count.</em></p> <p><strong>isFirstStep</strong><br> <em>Indicates whether a specific <code>int</code> index is the first.</em></p> <p><strong>isLastStep</strong><br> <em>Indicates whether a specific <code>int</code> index is the last.</em></p> <p><strong>indexStream</strong><br> <em>The step index as stream.</em></p> <p><strong>index</strong><br> <em>The step index.</em></p> <p><strong>getStepIndex</strong><br> <em>A method that returns the index for the provided <code>WizardStep</code> step.</em></p> <p><strong>getIsGoBackEnabledStream</strong><br> <em>Indicates weather the go back action is enabled as a stream.</em></p> <p><strong>getIsGoBackEnabled</strong><br> <em>Indicates weather the go back action is enabled as a stream.</em></p> <p><strong>enableGoBack</strong><br> <em>A method to enable the go back button for a specific <code>int</code> index.</em></p> <p><strong>disableGoBack</strong><br> <em>A method to disable the go back button for a specific <code>int</code> index.</em></p> <p><strong>getIsGoEnabledStream</strong><br> <em>Indicates weather the go back action is enabled as a stream.</em></p> <p><strong>getIsGoBackEnabled</strong><br> <em>Indicates weather the go back action is enabled as a stream.</em></p> <p><strong>enableGoNext</strong><br> <em>A method to enable the go next button for a specific <code>int</code> index.</em></p> <p><strong>disableGoNext</strong><br> <em>A method to disable the go next button for a specific <code>int</code> index. When disabling an index that is lower then the current index the <code>Wizard</code> will automatically animate back to the provided index.</em></p> <p><strong>getIsAnimateToEnabledStream</strong><br> <em>Indicates weather the animate to action is enabled for a specific <code>int</code> index as a stream.</em></p> <p><strong>getIsAnimateToEnabled</strong><br> <em>Indicates weather the animate to action is enabled for a specific <code>int</code> index.</em></p> <p><strong>previous</strong><br> <em>Animate to the previous step.</em></p> <p><strong>next</strong><br> <em>Animate to the next step.</em></p> <p><strong>animateTo</strong><br> <em>Animate to a specified index.</em></p> <p><strong>dispose</strong><br> <em>Dispose the controller</em></p> <p>Example of move next button:</p> <pre><code class="language-dart">return StreamBuilder<bool>( stream: context.wizardController.getIsGoNextEnabledStream(), initialData: context.wizardController.getIsGoNextEnabled(), builder: (context, snapshot) { if (!snapshot.hasData || snapshot.hasError) { return const SizedBox.shrink(); } final enabled = snapshot.data!; return ElevatedButton( child: const Text("Next"), onPressed: enabled ? context.wizardController.next : null, ); }, ); </code></pre> <p>Example of steps overview:</p> <pre><code class="language-dart">return ListView.builder( itemCount: context.wizardController.stepControllers.length, itemBuilder: (context, index) { final step = context.wizardController.stepControllers[index].step; return StreamBuilder<bool>( stream: context.wizardController.getIsAnimateToEnabledStream(index), initialData: context.wizardController.getIsAnimateToEnabled(index), builder: (context, snapshot) { final enabled = snapshot.data!; String title; switch (step.runtimeType) { case StepOneProvider: title = "Step one"; break; case StepTwoProvider: title = "Step two"; break; case StepThreeProvider: title = "Step Three"; break; default: title = "Unknown step description"; break; } return StreamBuilder<int>( stream: context.wizardController.indexStream, initialData: context.wizardController.index, builder: (context, snapshot) { final selectedIndex = snapshot.data!; return ListTile( title: Text(title), onTap: enabled ? () => context.wizardController.animateTo(index: index) : null, enabled: enabled, selected: index == selectedIndex, ); }, ); }, ); }, ); </code></pre> <h2 id="how-to-act-on-wizard-events" class="hash-header">How to act on wizard events <a href="#how-to-act-on-wizard-events" class="hash-link">#</a></h2> <p>In some cases it can be helpful to see the events that are being triggered on the wizard. To get insights in these events you could add the <code>WizardEventListener</code> to your widget tree.</p> <p><strong>IMPORTANT NOTE:</strong> The <code>WizardEventListener</code> depends on the <code>WizardController</code> so it needs to added underneath the <code>DefaultWizardController</code> widget.</p> <p>The arguments:</p> <p><strong>child</strong><br> <em>The child widget</em></p> <p><strong>listener</strong><br> <em>A callback that listens to the <code>WizardEvent</code> events from the <code>WizardController</code>.</em><br> <em>The events are:</em></p> <ul> <li><em><code>WizardEnableGoBackEvent</code>: Triggered when <code>enableGoBack</code> is called.</em></li> <li><em><code>WizardEnableGoNextEvent</code>: Triggered when <code>enableGoNext</code> is called.</em></li> <li><em><code>WizardDisableGoBackEvent</code>: Triggered when <code>disableGoBack</code> is called.</em></li> <li><em><code>WizardDisableGoNextEvent</code>: Triggered when <code>disableGoNext</code> is called.</em></li> <li><em><code>WizardGoNextEvent</code>: Triggered when <code>goNext</code> is called.</em></li> <li><em><code>WizardGoBackEvent</code>: Triggered when <code>goBack</code> is called.</em></li> <li><em><code>WizardGoToEvent</code>: Triggered when <code>goTo</code> is called.</em></li> <li><em><code>WizardForcedGoBackToEvent</code>: Triggered when <code>disableGoNext</code> is called with an index lower as the current index.</em></li> </ul> <p>Example:</p> <pre><code class="language-dart">WizardEventListener( listener: (context, event) { if (event is WizardForcedGoBackToEvent) { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text( 'Step ${event.toIndex + 2} got disabled so the wizard is moving back to step ${event.toIndex + 1}.', ), dismissDirection: DismissDirection.horizontal, )); } }, ), </code></pre> <p>For a full detailed example see the the <a href="https://github.com/Baseflow/flutter_wizard/tree/master/example" rel="ugc">example project</a>.</p> </section></div></div></div><aside class="detail-info-box"><a class="packages-scores" href="/packages/flutter_wizard/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">82</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">150</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">points</div></div><div class="packages-score packages-score-downloads" title="Number of downloads of this package during the past 30 days"><div class="packages-score-value -has-value"><span class="packages-score-value-number">684</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">downloads</div></div></a><h3 class="title">Publisher</h3><p><a href="/publishers/baseflow.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>baseflow.com</a></p><h3 class="title">Weekly Downloads</h3><div id="-weekly-downloads-sparkline" class="weekly-downloads-sparkline" data-widget="weekly-sparkline" data-weekly-sparkline-points="gEPjZ70AAACVAAAAdgAAAJIAAACtAAAA0AAAAOoAAADHAAAArQAAAI4AAACsAAAARgAAABsAAACpAAAAkQAAAN8AAACOAQAAzAEAAJUBAABEAQAAAwEAABUBAAAhAQAAAQEAAAQBAAAyAQAAVQEAABIBAAD5AAAAxwAAAJkAAABBAQAAjgEAAEwBAADGAAAABwEAACsBAAAzAQAA9gAAAFUBAAAOAQAAKwEAAMMAAABGAQAAyQAAABIBAACxAAAAzwAAAEQBAADaAAAAEQEAAMwAAAA="></div><h3 class="title pkg-infobox-metadata">Metadata</h3><p>A library that makes it easy for you to create your custom wizard. You'll have 100% control over the appearance of your wizard.</p><p><a class="link" href="https://github.com/Baseflow/flutter_wizard" rel="ugc">Repository (GitHub)</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="https://github.com/Baseflow/flutter_wizard" rel="ugc">Documentation</a><br/><a class="link" href="/documentation/flutter_wizard/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/flutter_wizard/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="https://api.flutter.dev/">flutter</a>, <a href="/packages/rxdart" title="^0.27.0">rxdart</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Aflutter_wizard" rel="nofollow">Packages that depend on flutter_wizard</a></p></aside></div><script type="application/ld+json">{"@context":"http\u003a\u002f\u002fschema.org","@type":"SoftwareSourceCode","name":"flutter\u005fwizard","version":"2.0.5","description":"flutter\u005fwizard - A library that makes it easy for you to create your custom wizard. You\u0027ll have 100\u0025 control over the appearance of your wizard.","url":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002fflutter\u005fwizard","dateCreated":"2021-11-08T23\u003a15\u003a18.689440Z","dateModified":"2022-05-24T07\u003a16\u003a52.770228Z","programmingLanguage":"Dart","image":"https\u003a\u002f\u002fpub.dev\u002fstatic\u002fimg\u002fpub-dev-icon-cover-image.png","license":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002fflutter\u005fwizard\u002flicense"}</script></div><div class="detail-metadata"><h3 class="detail-metadata-title"><span class="detail-metadata-toggle">←</span> Metadata</h3><div class="detail-info-box"><a class="packages-scores" href="/packages/flutter_wizard/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">82</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">150</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">points</div></div><div class="packages-score packages-score-downloads" title="Number of downloads of this package during the past 30 days"><div class="packages-score-value -has-value"><span class="packages-score-value-number">684</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">downloads</div></div></a><h3 class="title">Publisher</h3><p><a href="/publishers/baseflow.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>baseflow.com</a></p><h3 class="title">Weekly Downloads</h3><div id="-weekly-downloads-sparkline" class="weekly-downloads-sparkline" data-widget="weekly-sparkline" data-weekly-sparkline-points="gEPjZ70AAACVAAAAdgAAAJIAAACtAAAA0AAAAOoAAADHAAAArQAAAI4AAACsAAAARgAAABsAAACpAAAAkQAAAN8AAACOAQAAzAEAAJUBAABEAQAAAwEAABUBAAAhAQAAAQEAAAQBAAAyAQAAVQEAABIBAAD5AAAAxwAAAJkAAABBAQAAjgEAAEwBAADGAAAABwEAACsBAAAzAQAA9gAAAFUBAAAOAQAAKwEAAMMAAABGAQAAyQAAABIBAACxAAAAzwAAAEQBAADaAAAAEQEAAMwAAAA="></div><h3 class="title pkg-infobox-metadata">Metadata</h3><p>A library that makes it easy for you to create your custom wizard. You'll have 100% control over the appearance of your wizard.</p><p><a class="link" href="https://github.com/Baseflow/flutter_wizard" rel="ugc">Repository (GitHub)</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="https://github.com/Baseflow/flutter_wizard" rel="ugc">Documentation</a><br/><a class="link" href="/documentation/flutter_wizard/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/flutter_wizard/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="https://api.flutter.dev/">flutter</a>, <a href="/packages/rxdart" title="^0.27.0">rxdart</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Aflutter_wizard" rel="nofollow">Packages that depend on flutter_wizard</a></p></div><p class="detail-lead-back"><a class="detail-metadata-toggle">Back</a></p></div><div id="-screenshot-carousel" class="carousel"><fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-mh7qv2oc/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/></fab><div id="-image-container" class="image-container"></div><fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-mh7qv2oc/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/></fab><p id="-screenshot-description" class="screenshot-description"></p></div></main><footer class="site-footer"><a class="link" href="https://dart.dev/">Dart language</a><a class="link sep" href="/report?subject=package%3Aflutter_wizard&url=https%3A%2F%2Fpub.dev%2Fpackages%2Fflutter_wizard">Report package</a><a class="link sep" href="/policy">Policy</a><a class="link sep" href="https://www.google.com/intl/en/policies/terms/">Terms</a><a class="link sep" href="https://developers.google.com/terms/">API Terms</a><a class="link sep" href="/security">Security</a><a class="link sep" href="https://www.google.com/intl/en/policies/privacy/">Privacy</a><a class="link sep" href="/help">Help</a><a class="link icon sep" href="/feed.atom"><img class="inline-icon" src="/static/hash-mh7qv2oc/img/rss-feed-icon.svg" alt="RSS" width="20" height="20" title="RSS/atom feed"/></a><a class="link icon github_issue" href="https://github.com/dart-lang/pub-dev/issues/new"><img class="inline-icon" src="/static/hash-mh7qv2oc/img/bug-report-white-96px.png" alt="bug report" width="20" height="20" title="Report an issue with this site"/></a></footer><script src="/static/hash-mh7qv2oc/highlight/highlight-with-init.js" defer="defer"></script></body></html>