Showcase view in flutter | Show Case View Package | Flutter Package | Package Explore | ShowCase App

[Music] hey everyone welcome back again to another flutter tutorial and in this session we will discuss about how to implement showcase view in our header app so basically we will be making use of showcase view in order to provide some kind of relevant data regarding the functionality or features what we have in our flutter app and in this video we'll be making use of the package which is showcase view which actually provides a walkthrough for the users who are about to use a wrap for the first time therefore let me just refresh this app and let me show you how it actually works now i have refreshed the app and believe it like i have opened app for the first time you can see here you will be able to notice a overlay kind of thing which provides some data regarding that widget what action it is going to perform and so on say for example in this case it is a notification icon button and the overlay actually defines the same for the users and as you click anywhere in the background you can notice that it has now switched over to the icon which is beside of it is the profile icon and also provides the relevant data or the meta details regarding what action we can do whenever the icon button is being pressed right so these two icon buttons are actually present in the app bar now let us move over to the body just by tapping anywhere in the background you can now notice that our focus is now changed over to one of the widget which is present in the body and also providing the relevant details and what information we just want to want to convey to our end users and finally we have an showcase for our floating action button and it does the same way of what action will perform when we click on this floating action button okay in this video i just started showcasing only four widgets and if i click anywhere in the background now the animation gets stopped and will be able to browse over app as usual so this is all about the showcase view what we have in flutter hope you got a better understanding of what we are about to discuss in this video with this idea and without wasting time let's definitely jump into the coding part and get this done first we need to start by adding the package which is the showcase view inside the pub spec therefore we can add the package which is showcase view and always check for the latest version as for the video recording date this is the latest version all right after adding this package let's move on to the main. file here in the main.file we have made use of generated routes where the initial route points to my home page and here in the my home page we have a stateful widget class that renders the app bar and the body that renders this list with the help of the listview builder and finally we have the floating action button at the bottom now let's start implementing the showcase view by creating a custom showcase view class let's start by creating a status widget class which is going to have few set of parameters that is the global key the title description as well as the child which is going to be any further widget and finally the shape of the showcase since it is going to be final we need to provide the same inside the constructor and what it is going to return is the showcase widget itself so this showcase widget we get as a result of package what we have added in the pub spec okay so we have just defined a custom class that actually in turn returns the showcase widget itself now let's head over back to the home page and here we need to start wrapping all those widgets which needs attention with the help of the showcase class which we have defined now and before that we will just start creating individual and unique global keys for each of the widgets that is going to draw attention and let's create four unique global keys each key for each widget after creating the global keys let's start with the init state and here in say the unit state we need to make use of the method which is a callback method that actually gets triggered upon each frame change and that is going to internally call the start showcase method and this method is responsible for triggering the showcase whenever the app is getting loaded and it is going to accept a list of global keys therefore let's provide the global keys over here which is the global key one two three and four okay since we are going to make use of four unique showcases two four icon buttons over here in the app bar one inside the body and finally the fourth one would be the floating action button so therefore four global keys and here in say the enter method we have the app bar over here and these are the action buttons two unique accent buttons we have one for notification another for person which is the profile now let's let's start by wrapping this notification action button with the help of the custom showcase class after wrapping we need to also provide the required parameters which are the global key title as well as the description similarly let's tap this action button with the help of the showcase and provide the global key as the global key to and title and description as needed and similarly we can wrap this floating action button with the same showcase view class and provide the global key title and description over here and this list view builder is going to be inside the separate class therefore therefore let's define the global key here which is global key since it is a final let us add that inside the constructor and here in the render method we need to add the showcase only for the listview which is at the index 0 therefore let's wrap this circular avatar and inside this list we need to have the showcase over for this circular avatar alone therefore let's wrap that inside the circus view class and provide the global key as the widget dot global key title as all right now back to the home page let's add the augmented global key 3 with this we complete the setup process but if we restart this app we are unable to view the showcase animation the reason is that we have made use of generated routes so you can see here now we need to wrap this my home page inside the showcase widget okay so therefore let's wrap this inside the showcase widget and that is going to be the builder that in turn will be a response for rendering this home page itself okay now let's restart this app and you will be able to see that we'll be able to achieve the same showcase widget which we saw earlier in the demo session if i click on the background it toggles to the next action similarly the next and finally the floating action button so this is all about how to implement showcase view in our shutter app hope you guys found this useful if you do so consider subscribing and i will see you in the next video bye [Music] you

Channel: vijaycreations

Views: 9,417

Keywords: flutter, dart, flutterpackage, package, dart package, flutter app, app ddeveloper, showcase, showcase view, showcase view package, showcase widget, showcase widget in flutter, showcase package in flutter, flutter showcase package, package explore, flutter packages, packages, showcase package, flutter showcase, showcase package view, showcase view in flutter apps, flutter showccase view, showcase widget in flutter apps, user showcase, app, ui, app dev, flutter dev, uiux, ux, flutterdevs

Id: C4686LEzxg8

Length: 7min 46sec (466 seconds)

Published: Sun Aug 28 2022