Flutter ShowCaseView Tutorial – Introduce App Features To Your Users

a great app ui is one that minimizes the friction between a user and its functionality an excellent way to reduce that friction is to highlight and showcase the parts of your app which are integral to its usability this is particularly handy when a user launches your app for the first time or when you update the app with some new features showcase view is a customizable and simple to implement package you can use to show your users around the most important features of your flutter app [Music] hello everyone and welcome to risocoder our goal here is to provide top level education and teach you the skills needed to become an in-demand flutter developer don't forget to subscribe and hit the bell icon so you don't miss a single video let's get started first let's take a look at the app we're going to build when we restart our app our showcase will start the showcase will highlight pre-defined widgets in our app and display either a tooltip with a description a tooltip with a title and a description or a completely custom widget next to them when we tap on the screen we're taken from one widget to the next until there are no more widgets to be showcased we can also hit this gear icon here to be taken to the settings page where we have yet another showcase we can tap here to end it and go back to the home page we can also start our showcase by hitting this help icon here and there's one more thing we can do when we're in the middle of the homepage showcase we can hit this gear icon run through this showcase go back and now our homepage showcase starts right from where we left off in this tutorial we're going to be working with a starter project that way you don't have to worry about setting up any of the ui and can just focus on implementing the showcase view package however let's still get familiar with the starter project so that we're not lost along the way this is our starter app it is a demo water tracking app that doesn't really have much functionality and most things here are for visual purposes only we've got an app bar with a title a help button and a settings button we've got this visual water tracking interface and a floating action button when we tap on the help button now nothing happens but we will implement functionality for it later on we can however click on the settings button to be taken to the settings page where we've got a settings control widget and some text we can also go back to the home page now let's see how this is all written in code so we have our main.dart file where we've got the my app that returns a material app material app has a title and the home parameter has the home page widget let's go to homepage.dart where we've got all our code for this homepage right here it's got a scaffold an app bar an icon button for the help button and an icon button for the settings button with the routing implemented and we've also got our floating action button right here in the body of the home page we have a center widget with a single child scroll view and a column the column has the cups number display widget which is this one right here a size box for spacing and a cups goal widget which is this widget right here now let's go check out the settings page go on over to settings page dot dart and here you can see the settings page is a lot simpler it's just got a scaffold an app bar and a column inside the column we have the settings controls widget which is this one right here a size box and a text widget which is this one right here we also have a widgets.dart file where we've hidden all the intricacies of all of these widgets right here like the settings control and the cups number display in the cub school widgets and you can go through this file and take a look at how all of the widgets are created but really we won't be working with this and we'll only be working with these three files right here and be sure to check out the written tutorial from the link in the description where you can grab the starter project and you can also find all the code written in this video and go through this lesson at your own pace all right let's get coding so first let's head over to pubspec.yaml and add the showcase view package as a dependency let's add showcase view and we're going to be using version 1.1.0 and if you are watching this in the future be mindful of any potential breaking changes so let's save this and move on over to main.dart so before we implement any of the individual showcase widgets like this one or this one we need to implement another widget that's actually going to be responsible for creating starting finishing and maintaining the entire showcase that widget is called the showcase widget and we're going to be returning our home page from it so let's cut this home page we're going to use it soon and let's add the showcase widget oops c is capital now if you see the suggestion here you can hit enter now and it will auto import the package for you otherwise you can manually import it yourself the showcase widget has the required builder parameter which takes in a builder widget that has its own builder parameter holding a builder function this function is going to take in a context and it's going to return whatever widget we tell it to and in our case it's going to be the home page let's add some commas and save so for this tutorial this is pretty much everything we're going to implement here but showcase widget does have some optional parameters we can briefly take a look at some of these are on finish on start and on complete you can pass functions to any of these and the unfinish function will run when the entire showcase finishes the onstart will run when the showcase starts and on complete will run one individual showcase which it's complete meaning if you're on this widget now and then you tap that one's been completed and you've moved on to the next tap again now this one's completed so every time that completion occurs that's when that function will run now we also have an auto play parameter right here which by default is set to false but if we set it to true we don't actually have to tap through all of these widgets in the showcase they will instead be displayed automatically if you are setting the autoplay to true you can also mess around with this autoplay delay right here which by default is set to 2000 milliseconds but you can change it to whatever you want depending on how much time you want to pass between every widget transition all right we're pretty much all done here so let's save it close it up and move on to the home page before we finally go ahead and implement the individual showcase widgets like this one we're going to do one more thing and that is for every widget in our showcase we need to have a individual global key we're going to use these global keys to communicate to this main showcase widget in our main.dart file which widgets in our home page we want to be have as part of the showcase and also in which order so our homepage is going to have three widgets we want showcase so let's create three global keys we're gonna say final key one global key and we can just copy this down and change one to two and two two three awesome now let's move on to making our first showcase widget and first widget we want to be displayed is this settings icon right here so let's go to the app bar actions and this is where a button is now we don't want the showcase to highlight the entire button itself we only want it to be focused on this gear icon here so we're going to wrap the icon with a widget the widget is going to be showcase and make sure to import the showcase view package here as well now the showcase has a few required parameters one of them is key and here we're going to provide our key one that we just created because this is the first widget we want displayed in the showcase also we're required to provide a child and we're doing that here already and lastly we need to provide a description a description is this text that shows up in this animated tool tip right here so let's do that description description takes a string and our description is going to say change your water intake goal settings save that now this is everything that's required there are plenty of optional parameters you can take a look at and although we won't get to all of them you can go through these on your own time so let's take a look at some of those optional parameters now first thing we're going to do is we want to make sure that this highlighted shape over here is a circle to do that we can provide a value to the shape border property and we're going to pass in circle border now we know it's going to be a circle what we also want to do is we want to give a custom background color to this tool tip over here and we can do that by specifying the showcase background color we're going to give it a color of colors dot indigo next we can also stylize our text here a bit in the description by providing a text style to desk textile property and we're going to give it a text style and here we're going to pass in a font weight of 500. we're also going to give it a custom color of colors.white and a font size of 16. awesome so there are just two more things we're going to do here and that is add some padding first we want to add some padding between this widget right here and this overlay right here and we can do that by specifying the overlay padding overlay padding takes in an edge insets and we're going to give it a value of 8. we can also add some padding around this text right here and any content inside this tool tip using content padding and this also takes in an edge inside so we're going to give it a value of 20. amazing so we're all done here before we launch the app and see how it's doing let's add just one more showcase the next widget in our showcase is going to be this one right here and that's located in the body and it's the column wrapping these two widgets so we can wrap this column in a showcase and we're going to give it a key here as well this time it's going to be key 2 because it's the second widget in our showcase and we will provide a description here but we also want to give this one a title title is optional and it also takes in a string just like the description our title is going to say total and goal water intake and let's give it a description as well it's going to say track your total and goal water intake awesome now we're going to do something a little different here if you take a look at the settings icon showcase you can see it right above this tool tip there's an arrow pointing at the widget we're displaying and that arrow is there by default but we can also remove it just like you can see it's not present here so to do that we're going to set show arrow parameter to false we're going to also add some overlay padding give it a value of eight make sure that we have this nice indigo color in the background of our tool tip using showcase background color again colors.indigo and here's something interesting so if you remember in the first showcase we specified quite a bit of textile to this description now if you don't want to give these specifics and you don't need to get into the details of all this customization you can instead provide only a text color if that's all you need and that's going to make sure that both the description and the title are all that color that you provide so to do that there is a parameter called text color and we could give it a colors of white since that's what we want our text to be awesome so that saves us some time and that is pretty much it for the second showcase now we can go ahead and launch the app let's go to our main.dart file and launch this app amazing our app is up and running and although it looks really great nothing's actually happening still our showcase isn't running well why is that that is because we never actually told this showcase widget in our main.dart file when to start the showcase and we're going to do just that right now we're going to be exploring two ways of how you can start a showcase one is going to be by tapping this button and the other one on page build the on button tab is a little bit simpler so let's do that first let's go to our scaffold app bar and deleting this is the icon button that we're going to be using here so let's add some code to the on pressed function because we want the page to rebuild we're going to be using set state and what we're going to do now is we actually need to access the showcase widget right here and call its start showcase method so to do that let's say showcase widget dot of context and we need to add a bang operator here because of null safety and we're going to say start showcase now the start showcase method wants us to pass in a list of global keys these global keys need to be in the order of which you want the widgets assigned to them to be displayed so let's do just that we're going to say key one first key two and then key three awesome so that should be everything we need to get this up and running so let's restart our app and tap on this help button here and there you go if you've done everything correctly up until this point your showcases should start and this is our first widget second widget and because we haven't implemented the third widget yet it's the showcase just ends right after the second one but we will implement it soon before that let's implement the start on page build to start our showcase on page build we need to call the start showcase method from inside a net state of our home page so let's add in its state delete that and additionally we can't just call it the way it is here and that is because of the way the build executes so what we actually need to do is we need to place this method call inside the add post frame callback of the widgets binding instance to show you what i mean let's go ahead and type this widgets binding dot instance we need to add a being operator here dot add post frame callback we don't need to use this time stamp here so let's just leave an underscore there and now here we can actually register this callback and add our method call here so let's just copy this over add this in here don't forget your semicolons and add some commas for styling there you go okay that should be everything we need to get the starter on page build so let's restart our app and there you go the showcase starts instantly we can tap through it now we can also tap this button and i'll start up again and we're all set here now we can go ahead and implement our third showcase widget so we want our third showcase to be highlighting our floating action button so let's head over to that and this time instead of displaying the generic tooltip we want to actually have a custom widget next to our floating action button so let's wrap our floating action button with a widget and type in showcase but this time we're going to use a named constructor here called with widget and this name constructor will allow us to add any widget we want next to our showcased widget so we're going to need to add a key here it's going to be key 3. we also have the required height and width parameters we're going to give it a head of 50 and a width of 50. depending on which widgets you're adding you can play around with this height and width it will alter where your showcase widget is placed and how it looks so make sure to get exactly what you want out of this for us 50 works just fine now there's also a container parameter and this can take in any widget really so you can get creative but we're just going to add an icon to keep it simple icon icons dot local drink this adds an icon of a cup we're going to give our icon a size of 50 and a color of colors dot blue with a shade of 200. awesome so we just saved this page and our app hot restarted you can see that this looks a little wonky and that's because our showcase that we ran previously didn't actually finish it was still on the third key here and it looks a little wonky just that's just the way it is so we need to restart the app and it will look all right so let's go through this now and as you can see it's all fixed now we do want this to be a circle so we are going to provide a shape order a circle border and now save this now the circle is actually there it's just perfectly wrapping around this floating action button so we're going to want to give an overlay padding of edge insets dot all and give it a value of eight now that looks much better and that is actually pretty much all we're going to set up here for now so let's take a look at this once more first showcase widget second showcase widget third showcase widget excellent now if you remember in our finished app when we would click on this it would actually take us to the settings page but now it just skips over to the next showcase widget so we're going to implement that functionality next to be taken to the settings page when we're in the middle of our showcase and we tap here we need to specify another parameter on our showcase widget so let's head over to where we have our settings button and here it is this is our first showcase and the showcase widget has a on target clip parameter you can set and here you can provide any function you want in our case we're going to ask to be routed to the settings page so let's set that up now on target click it's going to be a function here we're going to call navigator dot push context and we're going to have a material page route here one second material page route and we don't need anything here and this will return our settings page amazing let's add a semicolon and some commas well we saved the app and it hot reloaded however as you can see we've got this big red screen here now with an error and that is because when we set the on target click parameter we also need to specify dispose on tap this boson tab takes in a boolean value and if it is set to false then the current showcase you're running is not disposed of when you tap on the individual showcase widget if it's set to true it is disposed off and it essentially finishes so let's set it to false first to see why in our case it actually benefits us to set it to true so let's save this again and now when we click on our settings button we are taken to the settings page but the showcase from the previous page is still running and that is definitely not something we want this is precisely because it does not get disposed off since we set dispose on tab to false so let's set it to true now save this again restart our app tap on the settings button and this takes us to the settings page no problem now we're gonna work on setting up the showcase for the settings page so let's go over to our settings page.dart file here we go and because this is going to essentially be a brand new showcase we need to create this showcase widget there so let's go back to the settings page and this showcase widget is going to be returning the entire content of this page so let's cut that now to make it easy and now our build method of the settings page is going to be returning the showcase widget and again make sure to import the showcase view package the builder here if you remember takes in a builder widget which has its own builder parameter and a builder function and here we need a context and this will return this entire content let's save that actually let's add one more there we go let's add a couple more commas okay now it's formatted nicely since we're only going to have one showcase individual showcase widget just for this widget right here we can create a global key for it now so let's do that above the build method final key one equals global key awesome this showcase is going to start on page build similar to how we had it in the homepage but with one difference so here we have our showcase widget in the build method of our settings page and in order to call the start showcase method on it we actually need to access the build context of this showcase widget right here so how are we going to do that first we're going to create a nullable variable called my context and it's going to be a build context and for this to contain the build context of our showcase widget we are going to populate this inside the builder function of our showcase widget so we're actually going to want to make this into a block body and now right above the return statement we can say set my context to context so this context right here and now we can go ahead and call the start showcase method inside our init state just like we did in the homepage okay so let's say init state delete this and here just like in the home page we're gonna have to put that function call inside of our add post frame callback of the widgets binding so let's do that widgets binding dot instance and don't forget the bang operator add post frame callback once again we don't need this timestamp and now let's access the showcase widget dot of and now here we're not going to access the context we're instead going to use our my context variable and it won't be null but dart doesn't know that so we have to make sure we insert this bang operator here as well and one more here and now we can call start showcase and here we're going we only have one key so we're going to pass that key into this list amazing and that is it now we can actually go ahead and implement our showcase widget for this widget right here so let's go down and we've got our column and the column contains this settings control widget as well as this text we only want our showcase to highlight this control so let's wrap our settings controls with a showcase we're going to give it a key of key one it's going to have a title change your water and take goal oops title and a description that's going to say increase or decrease the number of cups for your goal so just to specify how our theoretical app would behave we also want our showcase to have a custom tooltip background color so showcase background color again colors.indigo and we wanted to have a text color of colors.white and that is pretty much it we can add another comma here and that is it for this showcase so let's restart our app and now when we go to the settings page our showcase on the settings page starts on page build as well amazing now this is pretty much all done you could say but we could make this a little bit better by adding just a few modifications to make things run a little bit smoother if you remember in our finished app when we had the showcase running and then we would tap on the settings icon we'll be taken to the settings page finish the showcase and then when we would go back the showcase on our homepage that we just left from would continue on from the second widget that's one thing we're going to implement and another thing is and watch this carefully when we tap on the settings icon and this takes us to the settings page the routing animation is still going on while the showcase is getting displayed which looks a little bit odd and let's see it again just to pay attention this time oh there you go see the page slides and it just doesn't look exactly great and this is something we can fix and it's something we will fix shortly but first let's go ahead and implement the continuation to do this we need to go to our homepage and go to the first showcase widget and just add some more code to the on target click now the navigator.push as you can see returns a future which means we can use dot then to register a callback and we'll make this into a blackbody we don't need this value here so you can just put an underscore and from in here we can now call set state and from inside this set state we can call the start showcase function so let's do just that let's say we need to access the showcase and our main.dart file again so showcase widget dot of context and don't forget the bang operator and start showcase now here into this list we're only going to pass in the widgets after the one that we already played which would be the settings button so let's only add the key to and key three here save that and let's give this a run so let's hit on the settings icon now we've got we've gone through the showcase and now when we go back the showcase starts right from the second widget so this is pretty easy essentially when we're routed back we set the state and the showcase just starts right from the second widget and so on amazing now let's work on improving the animation on page route so let's head over to our settings page and essentially all we're going to do first let's go up to we're in it state essentially all we're going to do is we're going to delay the firing of this function so that it gives us enough time for the routing animation to finish and to do that let's cut this we're going to use a future dog delayed and we're going to give it a duration of 400 milliseconds which should be enough lastly we're going to register a callback here and in here we're going to call this function let's add a semicolon and that is pretty much it so let's take a look and see how this goes let's click here on the settings button and did you see that the routing animation finishes and then our showcase starts which in my opinion looks a whole lot better we are finally all done with our app and we have fully implemented the showcase view package hopefully you've learned a lot here today and are ready to use this in your own projects to go through this tutorial at your own pace once again and to get all the code check out the written tutorial available from the link in the description and if you are serious about becoming a great flutter developer who can build real apps for clients or at a job go to flutter.education to get the top curated flutter news and resources aimed at improving your app development career over there you can also subscribe to the mailing list to get the best flutter resources delivered weekly right into your inbox and if you don't want to miss more tutorials like this be sure to subscribe to this channel and also join the notification squad by hitting the bell button to make sure you grow your flutter skills because here at resocoder we're determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer like the video if it helped you leave a comment and we'll see you in the next [Music] one [Music] you

Channel: Reso Coder

Views: 10,932

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, showcase view, flutter app showcase, flutter onboarding screen, flutter onboarding screen only one time, flutter onboarding

Id: o4Hcwkr8t18

Length: 36min 25sec (2185 seconds)

Published: Tue Aug 03 2021