Guide Users Efficiently on First Launch - FEATURE DISCOVERY | Flutter Tutorial

what's up everyone welcome to another video in this video I'm gonna be talking about Federer to showcase your dependency share preferences and United widgets stuff like shared preferences and inherited widgets are really important terminologies in Fator so this video is gonna be quite wisdoms if you're new then please consider subscribing and without any further ado let's get started [Music] the first thing that I would like to do is to show you how to implement showcase view in the simplest manner and then we'll implement that on a premade and kind of a complicated you are so I'll simply clone the example repository by writing git clone and paste this link you can of course find this link in the description below so the repository is cloned and I've opened it in vs code this repository is actually the repository that's mentioned by the creator of the dependency on pub dev so naturally it also has the complete code for the dependency itself we are not interested in that at the moment so in order to run the example app I'll open up the terminal navigate to the example folder and execute flutter run and as the app launches I'm going to open up the main door dart file present in sort of the lib of example folder the first thing to notice here is this Showcase widget so in order to show the showcase he would need to place this widget at the very top of the widget tree after material app and then for the child we have passed the meal page widget which returns a scaffold actually it's not mandatory to place the showcase widget right before scaffold you can even pass showcase widget as body to scaffold the only thing that you need to be careful about is to make sure that the showcase widget is above the start showcase function now inside of the main page visit we have declared five different keys using global key class each of which will then be assigned to a widget upon which we want the showcase to appear coming inside of the bill method notice this line or block of code this code is basically responsible for starting the showcase as soon as the app is launched so we wait for a callback known as add post frame callback which is triggered as soon as the current widget frames are drawn and after this callback we simply return showcase widget dot start Showcase which takes a context and a list of keys after that there is nothing special we have a scaffold safe area and all that regular UI stuff what you really need to focus on is this showcase widget so the showcase widget has three required parameters which are key child in description so we have provided a key set a description and we've also passed the menu icon as a child let me just show the UI on the right so currently we are looking at the menu icon now as you tap on the screen it jumps on the next key or the next element from the list of keys which we provided to the Start showcase function there you go so this is key - it also has a title description and some more extra customizations are provided over here you can just press control space to list out all the properties and customizations that you can provide to the showcase message such as animation duration description text style overlay color overlay opacity and much more alright so I think you've got the basic essence of using showcase view you just have to make the showcase widget as parent widget then define some global keys then pass those keys inside of it start showcase function and finally assign those keys to the desired widget now let's try to implement something like this with a practical approach on a little bit complex UI which has multiple widgets and a large code base on the right side of the screen you can see the UI that we'll be working on I have created a video earlier where we make this UI from scratch so if you're interested you can check that out as well by simply clicking on the I button when you finish or get bored from this one so the first thing that we'll do is introduce the Showcase which now where to put it so last time we place it inside of a material a bridgit but this time I'll place it inside of a scaffold widget just to prove my point that it is not mandatory to put it in a specific place so I'll scroll down to the scaffold widget and cut this portion then I'll create a new stateful widget and call it homebody and then I'll simply paste the code over here to make this work you would need to replace the homebody widget which showcase widget and pass homebody as a child to the showcase widget right so it's time for us to create some keys I want a showcase to appear for this option icon so I'm going to create a global key with named options key similarly I want to showcase for card indicators so I'll create a key for that as well then for the name of the app for the search bar and then finally for the categories now inside of the build method I'll simply write widgets binding dot instance dot add post frame callback which returns with the duration will not be making use of that duration so I'll just pass an underscore over here then we need to call showcase video dot start showcase method now I'll pass in the context and the second argument is a list of keys so far now we'll just pass a single key say the options key after this we are required to wrap the options icon with the showcase widget and pass this options key there in order to do so we would have to pass this options key to the first half rigid then this first opposite would pass it to customer bar and then finally we would be able to pass it to the required fidgets that's just too much work and it's not ideal you should never do that for asking a specific information down the widget areas not a problem up to one or even two levels but here we would have to pass five different values up to two to three levels down which is a very bad approach therefore we'll use inherited Bridget's inherited widget is a special widget that is used to propagate data and information down the widget tree and even dynamically reflect the changes in that data without getting the intermediate widgets too involved in this propagation so I'm going to create a class and name it keys to be inherited which extends United widget great so now we need to override this method called update should notify and I'm going to return true after that I'll create a global key called cart indicator key then categories key options key search key and finally the name key and this class is immutable therefore we will have to mark all of its properties as final now I'll simply initialize these properties inside of the constructor and I'm also going to create another field of Bridget type and call it child after that we'll just write super child child super is simply responsible for calling the constructor of the base class we're almost done with the United widget the only thing that's left is to create a way by which we could retrieve the information so we'll create a static method with keys to be inherited return type and name it off then it accepts a build context and from here we are supposed to return a value of type keys to be in ated therefore we'll right context dot in height from widget of exact type and then we need to specify a target type in this case it would be keys to be knighted so here we have simply specified the type of the values that we wish to enter it now I'll scroll down to the home body state class where we have specified the entire layout and now I'm going to wrap this a period with a new widget called keys to be inherited after that we just need to pass the keys that we specified so I'll pass name key for name key card indicator key for card indicator key and so on great so we are done with the setup now you just need to wrap any design visit the showcase period and pass the necessary arguments so we're going to start off by specifying the showcase for the options icon so I'll go over to the customer bar and I'm going to wrap this icon widget with a showcase widget and for the key I'll just write keys to be United dot off paths in the context dot options key it's that simple and then I'll simply provide a description moving on I want to explain about that yellow circle do all the users when they launch the app for the very first time so I'll come inside of the bill just a method and I'll wrap this container with another widget and call it show keys then for the key we will simply write keys to be netted dot off context dot card indicator key after the ad will simply provide some description I also want to display the showcase over categories title and search far so all those widgets are present inside of the fall star budget the first thing that I'll do is I'll come inside of the Builder and I'm just going to create a final variable called get keys and will simply write keys to be narrated dot off context now we will follow the same procedure so I'll wrap the title with a showcase visit and for the key I'll simply write get keys dot name key and provide some description all right so I've skipped a little bit and as you can see that we have done the same thing again for search bar and the categories widget so it's time for us to launch the app and take a look as soon as the app launches the showcase appears and as you tap anywhere on the screen it jumps to the next showcase widget also if you're wondering that how does it decides the next jump target it simply looks over this list of keys that we passed earlier so you could just change the index position of the keys and could change the order of jump as well it looks cool but is it practical just yet watch what happens when I reload the application the Showcase appears again so every time and the user launches the application or if you call a set state method this Showcase will appear or watch what happens if I navigate to another screen the show gaze appears again and this time it does not even looks good to deal with this will use something called shared preferences shared preferences enable us to store very small amount of information in the form of key value pairs and this information persists even when the user terminates the application so I'll go over to the pub spec tamil file include the necessary dependency and sync the project then instead of the build method of homebody widget I'll create an instance variable of shared preferences class and name it preferences so there are two operations that you can perform with shared preferences either you could save the data in the form of key value pairs using set function or you could retrieve that data using the get function I'm going to start off by creating a function called a display show keys and mark it a sink then I'll initialize the preferences instance variable that the get instance method of shared preferences class and this returns a future so we will wait until we receive the result now we need to check whether or not to display the show case based on the value that we received from the shared preference so I'll right bull Showcase visibility status equals preferences dot and it lists out all the functions that you could use such as get bool get double Garant to read boolean double or integer values then we also have a set bool set double and send to save boolean double or integer values for now we'll use the get bool method and all these get functions except an argument that is the key in the key value pair for the key I'll simply write display showcase currently we haven't stored any data or any value for this key so it will probably return null which means that the user is launching the app for the very first time therefore we need to show the showcase so I'll write F showcase visibility status equal equals now return true then all sort of this if will return false the work is not done yet we'll come back and see what's missing for now I'll just call the display showcase method and use the Ben callback to receive a boolean value called status and it starters is true then I'll simply copy this code and paste it over here now you are free to remove this add post frame callback method let's go back to the display showcase method and try to figure out what's missing so right now the show kids with ability status will always be now therefore we would need to set some value for the display showcase key and we can do so by simply accessing the set bool method inside of the if block the set functions take two arguments one for the key and the other for the value so for the key you want to write this place showcase and for the value I'm just going to pass false in this case you could either pass through or Falls in the place of value because our main focus is on defining the key value pair with the key display showcase and we're done I'm gonna hard restart the app once again and now at first the showcase is displayed but when I move to the next screen showcase does not have use also let's say that your user has seen the showcase once and now when he quits and relaunching the application he's not annoyed by looking at the showcase once again so that's it for this video I talked about shogi widget inherit widget and shared preferences all of which are really important and useful topics I hope you enjoyed this video don't forget to share it in your circle or maybe online groups or with the people who you think would find it helpful make sure to LIKE and subscribe and I'll talk to you soon

Channel: The CS Guy

Views: 27,152

Keywords: flutter, flutter tutorials, flutter tutorials for beginners, flutter showcaseview, showcaseview, guide users, first launch of application, feature discovery

Id: DM4zorit1so

Length: 14min 45sec (885 seconds)

Published: Sun Sep 15 2019