Effortless Interactive Walkthroughs with FlutterFlow: A Guide

have you ever needed to create walkthroughs like this well now you can right inside flutter flow and to do that you can come over to the left side here to this new tab that's walkthroughs now when you create a new walkthrough it'll be scoped to the page that is each walkthrough this whole thing that we're creating will be on one particular page that you specify here but you can create multiple walkthroughs and I'll show you how to chain those together but let's start at the top here and give this walkthrough a name well call this coffee selection next we'll Define our walkthrough steps and each step is comprised of two parts an overlay that focuses the user's attention on One widget and second a component that will provide some description of that element or however you're using your walkthrough and you can have as many steps as you want so here is step one and we'll give it a name here because in this walkthrough what we're going to do is we're going to provide an explanation for each one of these selections down here these four ones so this first one will be coffee and next we want to select which Widget the overlay will focus in on and you notice after I click this this UI is grayed out because flutter flow is drawing our attention over to the actual UI of our app where we're going to be selecting a Target that is we'll be selecting which widget we want to focus on so for the first one here it's our coffee and if we're happy with that selection we can confirm it and we'll re focus on this UI First Step done now we select our content or our component the thing that we want to use to explain the widget that we're focusing on and this has to be a component so I already have a component set up here this little guy right here and because you'll typically reuse these components for explaining multiple different Widgets or sections on a page you'll normally want to Define parameters so here I have two I have a string that will just be the the explanation of that widget and then an icon for a visual representation of the thing now one thing to keep in mind is that currently these can only be parameters that accept values so for instance I couldn't add another parameter in here that would be an icon because then I would be passing in an icon file and not a value like a string or an integer okay so let's get out of here remember that after you define your parameters they have to be bound to the elements in that component so here I have my text and that's bound to the component parameters explanation right there and similarly our image down here I go down to the path and I have it bound to this icon okay beautiful so this is the component I'm going to use in my walkthrough so we can go back there now and we can select that component next we've got this red right here because we have those two parameters that we haven't passed any data to yet so let's do that so first let's pass an explanation and remember this this is for that first one so we want to say select coffee type and then we' got the second one so let's pass that it's our icon and I've just got a URL for that beautiful and close finally we want to set our content alignment and we've got four options on the four different sides now keep in mind that this is going to focus on this row right here so our component will be set either on the top above it below it on the left or the right so we want ours on the bottom cuz we got that nice pointing carrot all right beautiful almost done next we've got our Focus shape and we can just demonstrate this right now so let's just start our preview so that's a circle and you can see our component right here and we don't want to Circle because it's too big and it's going to try to give some Breathing Room outside of your widget so let's switch over to our rectangle so let's stop a preview right here go to our rectangle and start our preview beautiful notice you also have the option for the overlay color that's this dark color right here we're going to keep this with the default right now and finally we've got our skip alignment so down here we've got this skip button that allows users to skip these walkthroughs if they don't want to go through it okay so let's stop this preview and let's close this up and I'll quickly add the last three steps all right beautiful all done now we can add our walkthrough so we've created our walkthr but we haven't bound it anywhere in our app because we probably want to run this walkth through under some condition like when a page loads for the first time so how do you do that well you do that in the way that you would expect in flutter flow a walkthrough is just another action so let's say I want to run it when this page loads here so I come to my root widget here I select it I'm in my second tab I add an action and I can just search for walkth through and there we see start walkthr let's open this up here and select on page load we've got start walkthrough and just select which walkthrough we want we've only created one so there it is so this would start our walkthrough now of course what you'll probably be doing is running this just the first time a user opens the app so you would probably check for a condition before this but I just wanted to show you how to execute the walkthrough logic and you may have noticed something else up here that we have additional triggers so we have an on walkth through complete trigger and on walk through skip trigger so these chains of actions will execute on these triggers so when you gone through all of the steps in the walkthrough then you can Define some logic here maybe you have two pages that you have walkthroughs so you could add that additional page here and same thing if they click that skip button then these actions will be executed and that's how to create walkthroughs in flutter flow

Channel: FlutterFlow

Views: 8,913

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, walkthrough

Id: FFpR1SDrZEQ

Length: 5min 48sec (348 seconds)

Published: Thu Mar 07 2024