Flutter : In-app tour - present your app features to users

hello my beautiful friends on the internet how you are doing okay so welcome to another video today we are going to be looking at something amazing uh all right so uh and also for this tutorial I've decided to use one of my apps at Scott blocker so I'll be using it to demonstrate how this works so uh what we are going to be building today is actually a in-app tutorial tutorial yeah let me put it that way enough thought tutorial so you know sometimes in the case uh let's say you're working for a client or you're building a company project or you yourself you're building an app and you want to show first time users how to use your app like uh various buttons to click and what the buttons does what the test field represents and all this stuff so you want to show them give them a tour of how your app works so that's what we are going to be doing in this video today and it's going to be pretty straightforward and simple okay so uh the first thing you want us to do is uh go to your pop pop the depth though but before this tutorial I've actually tried a lot of packages and so far I think this tutorial coach Mark was able to give me what I wanted and the fact that I love it again is because it has an unfinished callback so once this tutorial is finished for that page you can actually maybe save it to a shared preference so that you won't show the user that same I have to tell you again when they come the next time all right so it will only show for new users so it's pretty much good and straightforward so I want you to just like uh go through it and see how it works and all that so since I've already created this before I think I don't really need to follow this tutorial back to back all right it's just going to be a cool one so uh looking at this uh so looking at this package you can see it supports every platform that flood up supports okay and it's actually not safe so uh without much talk uh let's go to our project because I'm actually using uh my previous project and this app doesn't for now it's not really compatible 100 with iOS so that's why you're seeing is error so just submit it and it's actually available on Play Store you can search it I score blocker so the name of the app is blocker all right so uh quickly first thing we need to do because looking at my box by the TMR file you will notice that I've not added any dependency yet all right like for the tutorial coach stuff all right so what we need to do now is to add flutter Pub add this guy all right so it's going to uh install the dependency and everything that will be needed for us to view so uh quickly this app has various Pages it has the home page it also has the add site page you also have this settings page so for this tutorial what I'll be doing is just to add the in-app tool for this ad this page yeah this add page all right so I'm going to add to this guy to show you okay this is where you see your name uh also uh this is where you see your live and also add to this guy this is where you get more life and also I'll add to these three test feeds and also add to this save button all right so once it's completed it will return the Callback finished then we can go ahead and save that stuff to our shared preference all right and all that but I think I won't be handling that oh let's see let's see how it goes though let's see how it goes all right so quickly uh it has been added to my postpaid.tml file you can see it here all right so I just do a quick hard restart and quickly I'm going to go to so the next thing I'm going to do is to create uh the list of targets I want to Target so so far already uh told you guys that I'm going to be showing uh the targets for this name icon the live the get more live button the website URL and the rest all right so quickly what I'm going to do I'm going to create maybe go inside my YouTube file I don't know if it will be suitable under utils but I think what I'm going to do is just to go to utils and maybe create your folder in there which is not really nice I'll just create a file actually so I'll call it in so for in-app tool it normally has a Target so that Target will represent each of the pages and what you want to do and it works with keys so you need to make sure you have your Global keys in order so we have an in-app in our tour target. okay so inside here we are going to be creating our targets and uh this guy actually comes with an inner target so you need to use your your target Focus yeah and I will call this uh let's say add side packets okay because that's the name of the page all right so once that is done we can quickly uh do something like this okay so uh we need to actually Define each of the global keys that we need but for now I don't really know the global keys that we need for this guy so what I'm going to do I'm going to quickly locate that page which is this outside page so I'm looking at it now since I said I want to show for this guy one I want to also show for this one I want to show for this one and these three test feed and also the same button so that means we will be having one two three four five six seven keys all right seven Global keys so what I need to do now to locate the icons I will just have the first key which is going to be a global key all right I'm going to be straightforward though so we have uh the various Global Keys we need so I can just have something like final this is name yeah so I'll just call it name key and it's going to be a global key all right then I'll duplicate since I need one two three four five six seven so I'm just going to duplicate that to seven places okay this is six already then I'm gonna change this one to life okay live key or let me just call it hotkey all right and this one now is going to be get more live button okay let's say live button key and this will be website URL key so I'll just call it URL key and I'll call this one duration key and uh code is on reason reason key okay okay all right reason key and I'll call this final one save key all right so quickly what we need to do uh also if you're creating custom widgets you want to make sure that you actually expose the key property all right uh when you're creating a custom uh widget or whatever you're creating yeah to expose it if you want to add uh in-app total to that particular widget all right so the first one now goes to okay so this add okay this welcome and life is not actually inside this page okay so I think I will know I will not be handling it because if you go to my home page you can still see it so it's actually inside this my main activity page yeah if you look here you're gonna see the hello and welcome so it's not really inside that same page so for that I think if I want to handle it I will need to handle it differently like handling it inside the main activity and then coming to the other page to handle it and all that so I think for now I will just remove the heart key and the name key so we are only going to show the tutorial for this guy this guy this guy this guy and this guy so basically we are looking at uh five items now one two three four five okay these two are going to be inside the main activity because it's a different page all right so quickly what we are going to do now these are this gets more like button if you look here we have get more live button and uh so we have our container so what we can do is just to create the key property and we can say live button key all right we just have to pass the key there awesome so uh the same thing happens uh when we have our website here realize so locate the website URL so this is it I'm just going to set the key and I will call it uh you are like URL key and uh we have this guy for duration we also have to set the key for duration as well and come down here for reason I will set the key to for reason and finally we have our save button which is this guy okay so we're just gonna set save our key to save key awesome so that's pretty much it we have been able to Define all our keys so far and nothing is happening right now because we have not really triggered uh the in-app tour stuff all right so quickly since I said I'm going to be having for one two three four and five I'm going to create in-app tool for that outside Target so this is more like the page so you can just say outside Target page and if you want to handle other Pages you can create their own targets and all that so that's how it flows so I quickly because we have a because we have like we have uh Four Keys here what I'm going to do I'm going to be creating Four Keys as well for these guys all right so let me just copy this a little bit and come down here so I'm going to create it's going to be more like a Constructor okay yeah it's going to be a Constructor in here so uh quickly what I'm going to do is just to uh set these guys I'm gonna remove this think this guy shouldn't be here all right I just want to use this name as reference nothing much so I'm going to delete it later so uh the first thing I'm going to do is just have uh it's going to be required every key days are going to be required so I have my Global key and I'll call this one live button key okay so I hope this is not going to be long but we are just going to try you know to make everything simplified all right so we have our required key and I'm going to duplicate it to five places okay one two five and this one is going to be URI key URL key and this is going to be duration key this is going to be a reason key and finally we have our save key okay for that particular page awesome so now we have those guys out we are going to remove this one so I just created them as a Constructor so whenever we are calling the our targets page we just have to pass the keys which are these keys inside okay as a parameter all right so now we are going to create our list of targets and what I'm need to do now is just to add a list so I will call it Target Focus okay so it's going to be is targets and initially I want to set it to an empty are we all right so firstly I need to add a first Target so the first Target I want to Target is just get more life right so what I'm going to do now I'm going to add a Target Focus so this target for make sure you close it so this target Focus takes a property of the key targets that you want to Target so for this key Target which is this first guy is going to be to get more life all right so I'm going to put this get more live button inside there and if you hover I can see it has so many properties you can work with right so and this kit Target is actually a global key right so I'm moving on I'm going to uh it also has a skip Alliance keep whatever you want to align your skip uh let's say you want to align it to the top left uh you're going to see how all this works so uh let's see align uh what am I spelling get out of here okay alignment dot we can use something like top right so I want it to be at the top of this page when it's showing like a skip button all right and moving on we have a radius you can Define the radius of how you want it to look like so I want the radius to be 10 to just give it a nice feel and you can set the shape so the shape can be so many ship but so far I think the best shape that has worked for me is the slight Focus dots uh that wrecked so you can actually use a circle yeah but this one has been so amazing for me so it just gives me what I want and make the UI looks cool so it depends on you you can just experiment and see what you are going to get so lastly another one is the content so this content Define the message you want to show to the user all right so uh the first thing we'll need to this content is not like a normal widgets okay it's actually a list of Target contents all right so we're going to have a Target content so that Target content you can also align the test so whatever you want your test to be let's say above the widget or below the widget but in this case I think um having it at the top is actually amazing so I'll just have it at the top which is more like yeah content I like it doesn't take normal test online I think it's this Hoover yeah it takes content online okay you can see that so it takes content aligned so you can set it to top and uh secondly it takes a builder property so this Builder is more like it has a contest and a controller and now we can return any widget we want to return all right so in this case I'm going to be returning a container I think this is more like what I'm going to be using for all of them and the alignment is just like our normal alignment so I will set you to Center so you can just go ahead and like experiment with all these properties and see what you want but so far this is more like the best uh sofa that I've seen uh in terms of creating our tutorial in-app tutorial and all that so we can create a cross axis alignment so this is more like me creating a widget so I'm just using all these tests because I've created this stuff before all right so just stay stocked in my head and I know the values that I used initially to make everything look cool so uh you can just uh experiment on your own so don't just copy and paste whatever I'm teaching you here so and we are going to have a children so these children is more like our test widgets that we have so here we can Define the first one which is the get more life so I can just say uh this is the uh button to get more live okay yeah so we're just playing this yeah so this button is going to tell us okay get more life that's what it does and all that so um we're also going to add uh okay let's close this guy up and inside here I'm just gonna set the alignment property of how I want it to look like so in this case I want the test align to be at the center so it's not going to be just it just let just maybe see justification I don't know but I just want it to be at the same time you guys already understand what all these guys works so uh my style widget I can have a style so I'm just like styling mine test so in your case you can actually maybe do something like uh styling the uh the color the font size of what you want so in this case I want the color to be uh colors.to White all right so I think this works and so far I think we actually pretty much good to go so I'm going to create this constant okay so I don't know why this guy is showing but let's see if it requires a widgets the same thing do you need a constant just wondering okay I need a constant yeah so we got a guy and you can see so far we have created our first targets all right so this is pretty uh cool uh this is cool so far but we are having errors somewhere because we need to return these targets that we have added right so this is more like the first packets okay so we can return let's say we turn targets okay that we can use so we can just return the targets that we just added all right awesome so now the error is gone but looking at this now we only added one target which is for this get more life if we run this thing execute everything we are only going to get tutorial for this one live but now from what I said initially I want to show for all these other guys right so what I need to do I'll just have to like uh duplicate this guy okay so uh this one is going to be for you Roi so I'll just duplicate it one which is for urli I will duplicate it again too for our duration okay yeah I'll also have another one again for the Restriction like a reason yeah which is this feed and uh okay something is wrong what did I do uh okay all right so finally uh we have another one for the save button all right okay that guy back so that's pretty much everything we need now for this tutorial we have added all the targets so far and return them so the first Target is pointing to the live button key the second target is going to be pointing to the URI key so I need to change this key to the URI key and also I will change the test so this is where you input your url something like that this is all right so if you don't know blocker is actually an app that helps you block website you can also set the duration of how long you want the sites to be blocked you need to handle that all right so we have changed the URI key and the next one is going to be the duration key so going down I'm going to change this live key to duration and also copying this test as well so I'll put it here so we're just going to be this is where you input your your uh the duration to block a website awesome so this is pretty much cool and then secondly we have our easy duration okay reason okay reason key okay this is where you specify the reason for blocking a website okay this is where you specify the reason for blocking a website okay and uh lastly we have this guy which is for the safe key and we have yeah click here to say awesome so this is pretty much everything we need uh you can see we have created the targets for each of the our feet the button the widget everything that we want to like show tutorials for All right so uh moving on I think we are pretty much okay with this so inside here now you can like create other targets let's say you want to create Target for your dashboard page you can just create another list Target uh just like this just duplicate this and create another Target from it depending on how many targets you want to like or show tutorials on you can create their keys and add all the targets to their description and all that yeah awesome so uh going back for now we are going to the add site page which is this guy here so quickly what we need to do now since we already defined our keys and the next thing I'm going to do inside here is to Define our the tutorial coach Mark uh variables so I'm going to create it as a late uh okay uh tutorial coach Mark and uh I'm just creating an instance of it uh tutorial coach Mark and uh so uh the next thing I'm going to do now is to actually to like create an init state to initialize the in-app tool all right so I'm going to create this as a function in its states okay initialize uh let's say add I know the names that name looks pretty long so I'm going to initialize this tutorial Mark now and uh you you need to do this for every pages that you want to show tutorials on because uh so far so Targets this target now will now represent the targets that you actually want to Target so in this case you want to Target the add site targets page all right so I'm just going to copy that and set it as the target here and you want to import that guy and uh so far I think this guy is returning errors because it requires some parameters to be passed okay so uh that's not a big deal uh we can just do that now we already have all our keys so the first key that I'm going to pass is actually let's say we have a live key and I'll pass our live key here we have our URI which is the save key okay so uh once we have the target the next thing I'm going to do is actually to set the color shadow like the color of color you want the background to look like so I don't know which one will be good but let's just try different colors to see what works so for this because the app color is white I'll be using colors.red and uh so uh the padding Focus okay I think you can just experiment with this as well so I won't really tell you how to do so you can decide to hide skip so if you want to hide the skip you can set it to true you can set it to four so I think by default is actually Four so the skip is going to show so in this case let's just uh set a value so we just talk about this value later on or okay okay let's go with high skip for now let's just see it's false so I want you guys to see how the skip shows and the now we can set the opacity of the shadow that is going to show so in this case I just want to set it to 0.8 to give it some transplant transparent look transparent fuel then unfinished so at this unfinished page this is where you set the value to maybe a shared preference and say Okay add add site has been showed for that particular user you understand you can just save a specific value through to in-app site or then in your initi stage you can search inside the share preference and see if it's actually available or not all right but this one's finished we just have to print a test and say completed so the same thing happens too because we have other properties too you can say on skip in case the user skips that tutorial you can just maybe save it or you can maybe tell the user hey we are going to show you this later in the future something like that yeah so it has so many callbacks which you can work with and so it depending on you on your what you want uh what your clients wants and all that so you can just go through them and work with each of the properties awesome so I think moving on uh we are pretty much close to the end of this video so I'm going to quickly see how we can show the in-app tool all right so the first thing you want to do uh in this case now is to first of all initialize the in-app to whatever you're doing so we have an immediate State somewhere around here so we have init State you want to make sure you initialize the in after first thing okay you initialize it before you show it okay so showing it is more like uh triggering let's say we create a function here I'll just create a void function that will handle showing off I will just create a void function I will handle show in app store for this page alone okay so you might want to maybe make it private or something like that also this one you might also want to make it private to this class because if you are creating for other Pages you still have to Define uh the same thing too okay so sure enough top we can just call our tutorial Mark which is this guy here because before we show it we assume that she's already been initialized and the instance have been created because we are calling this initialize in-app to first so this is just a function we are going to call um to two yeah so I think I for my own sake I want to like call it for like two seconds I want to show it so I'll just add a duration uh this is just a test case uh you can still use it on your own so we can add a duration of one second delay before we show uh the stuff okay so we can just call tutorial Mark okay dot show then you're passing your contest awesome okay so this is great so uh once that is done you can call our show oh let's say two seconds then it's going to show so bright because by that time uh the in-app tour uh will just be initialized has been initialized already so here now we just have to like show in a tour okay so this is pretty much cool I don't know why I don't know how to spell show okay so yeah so um and that's it I think we are pretty much ah okay all right so now I'm just gonna do it hot we start to see how this guy works and uh yep so once we come here we're not going to see any in laptop because we didn't Define enough tour inside this homepage we only defined it when the user gets to add so wait for two seconds you should see how cool it is it's showing this is the button to get more life and once you click on it it takes you to the next Target which is the URI this is where you can create your website URL to block and you click it shows you the duration as well you click it shows you the reason for restriction and finally it shows you the test so once we click on this guy you should see it's going to print on a finished callback which is completed so at this point is where you're going to save your stuff to Shared preference so let's just assume you've created your shared preference to you save the status so for that I'm going to be using a Boolean flag to test to show us so I would say is saved equal to initial is going to be first so let's say the user have not saved so calling this in app store I will just do something like uh okay let's say cut this I will say this is where you can just maybe fetch inside your shared preference or something like that so I'll just say if it's saved is equal to force then show in afterwards so you're only showing enough thought when you save this first all right so let's uh before I test that I want to show you guys something else again remember I told you that I used a wreck which is this guy so I'm going to change one of it to something like Circle to show you guys how it works okay so let's do a hot restart all right and I'm gonna go to this guy you're gonna see because this guy is false that's why he's showing that means the user have not saved this guy you have not seen this guy all right so I'll click next and you will see that it will have you can see the skip icon here when you skip so you can decide to show skip set it to height skip set it to true because sometimes you may not really want users to skip uh the whole stuff so you can just set skip to false all right to true sorry all right so once it shows you cannot see the escape and users cannot skip it they must pass through the inner thought process so looking at this gets more live and if I click you will see that remember the second one I actually use Circle so you get you're going to see how it's going to show which is not nice yeah at this point sister does not know where to click uh to get rid of this stuff you cannot just click anywhere and it doesn't work you must click on the website URI so I don't really like this circular one so I just prefer the rack so I don't know what your uh preference would be so whatever it is about ice I would just suggest going direct so clicking on website URL it takes us to the record this is where you impute the duration on how long you want to block your website and yeah restriction in all that you save and that's pretty much it you get a response through all right what about okay I think I still need to show you guys more things so if we set this guy now to true it's never going to show yeah it's not going to show because it has been set to true so at this point we assume that the user has already okay now this is not working so we assume that the user has already seen the in-app tool so whatever you do is not going to show so this is at the point I want you to like create a shared preference for it all right quickly I think I just have to show you guys how to create a shared preference and then we move on all right I already added shared preference on my so this is not really part of tutorial but we are going to do it uh so I already have shared preference inside my app so what I'm going to do now inside this guy I think I'm still going to create it inside this target okay for Simplicity but for tutorial sake for a real life production app don't do that you should have a particular class where you have your let's say a provider you can have a DB okay let me just create inside my provider I'll call it in up tall this is not really nice but let's just do it like that uh storage okay so that's so inside here I'm going to create a class save uh add safe storage save in app store okay so inside I'm going to initialize shared preference so it's going to be a future of shared preference okay so I will call it data let's just call it like that and I'll call it shell preference dot get instant all right so inside here I'm going to have something like a save uh save uh ad site save uh you can have some initial preferences that I'm just making the name uh to be specific based to be unique based on the name of the page so I can call this outside status okay so we can have something like uh final data no more data let's say value so equal to uh then we can call something like uh so this should be any sink okay so I can await this guy data like so so here I can just call Value dot sets pool and I will say save okay add site is going to be the name of the key and I will set it to true so whenever we call this guy we are actually setting it to true so once it costs finished we are saving it once it costs finish we are shipping it just like that then we're also going to have a value that is going to read uh if this guy has been saved or not so here and I'm going to return a Boolean flag so I will call it gets add site status okay so we have a sync callback and I also have my value the same thing for this guy all right so I'm going to quickly check if a value that contains this key which is ADD site key that we have here for our site so if it contains it uh what I need to do is just to get the value so I'm just going to have uh final get Theta equal to so value dot get key get good sorry and I'm going to say add site like so and quickly I'm just going to return the get data because I know it's already a Boolean flag so uh we need to do it like this and you can make it a bull and nothing happens uh get gold valuable can be assigned to the value of blah blah blah okay so he needs this guy or else so if he does not exist what we just need to do is just to return first because we just assume at that point that the user has not created anything all right so quickly what I'm going to do and I'm going to go to my ad sites so where we have this guy unfinished I just have to call this guy save in app tour okay saving app tour dot save site status so once it calls on finish it will be saved all right and uh at first inside my innate stage where I'm calling this guy now I'm going to quickly call the save this guy dot get status dot then so I'm going to listen to the value so if value uh is equal to True okay so if the value is equal to true that means the user already seen the state okay we show nothing so what I need to do just to check for one case so if value is equal to force that means I have not checked for it I'll just have to show something like this okay remove this guy so for every two seconds it's going to check save in app tour get a status then if value is equal to force so we can print something values already true user already seen it all right so this is pretty much it once it's unfinished we save you can also do the same thing on Skip and then save it assuming you want to shoot skip all right let's move on I will do how to restart now and uh yep once it gets to this page you should see we are going to see the in-app toe and everything is showing uh it's showing but at this point if the user backs out of the app okay I don't like this thing like showing like this let's quickly change it uh to wreck so at this point if you use as backup of the app like they go back it's not going to be saved because we assume that the user have not really finished everything so if the user stick comes back to that page they're still going to see the in-app tool so it's going to get cleared whenever they click on the last item like the last Target which is this guy he feels that gets to this Target and they don't click on it the exit is not going to show but in this case let's you can see it's showing user has not seen this page because this is actually the first time that the users are coming here you can see user has not seen this page then it's showing the tutorial so if you click on Save it has been saved because we have this completed so it has been saved so if we we start now if user comes back to this page again they're going to see this user has seen this page and that in-app tool is not going to show so Watch What Happens user has seen this page okay and the inner Port is not going to show so that's pretty much everything guys that I want you to see and thank you so much for watching and do not forget to subscribe like and share to your friends if you have any complaints put it down in the comment section below and also don't forget to download blocker app is actually available on play store so just go to Play Store yeah you can see blocker is actually an app is for now is actually available for Android users so I don't forget to download it don't forget to share with your friends so it blocks the website and apps it helps you to stay focused and all that so it's available for Android and I want you guys to help me get this stuff to like 5 000 plus downloads yeah 5 000 plus yeah so I believe you guys can do this uh yeah so just support me with that little thing and I'll be so happy for everything so uh that's what blocker does you can install it on your Android device and see how it works okay for now it's not really available on iOS and uh yeah so thank you so much guys for watching I appreciate your time you can go ahead and follow and like a tutorial coach Mark and I'll see you guys in the next video uh one thing I think I cannot really share this uh code because it's more like a project so I cannot really share or create any kids on repository for it but you can look through their their documentation to learn how it's worked thank you so much guys for watching I will see you all in the next video

Channel: Destiny Ed

Views: 4,319

Keywords: in app tutorial, in app tour

Id: Jwz1BW1KVG4

Length: 36min 3sec (2163 seconds)

Published: Thu Dec 22 2022