Flutter ShowCaseView Widget Explained and Demo App

[Music] foreign [Music] so in today's video we are going to see how you can use showcase widget in your app so let's start with our video so here we have our demo app so as you can see inside our demo app I have quite a few widgets which are let's say we have a list style a circle a flutter logo and a listile with our elevation which is using card and a button okay so now what we can do is you can simply go to pub.dev and install this package called showcase view go to installing copy these dependencies and install it in your system in perfect.yaml and save the video okay so now as you can see we have Pub get and it will get installed in our app so with our demo video what we can do is if you want to start our showcase on the click of the button what we can do is we will simply wrap or what you can do is let's just cut our body part and what we can do is we'll get our showcase widget showcase widget okay so now as you can see it takes in a builder so we'll take a builder we'll pass in our context and what we can do is we'll simply written our UI okay let's just save the app so now we have wrapped our view with showcase widget okay so now what we can do so if you want suppose a showcase to your icon uh your logo on your list style simply go ahead and wrap it let's say we wrap our icon with a widget called showcase okay so as you can see this this is Showcase and it requires a few required parameters which is a key and the description okay so for that what you can do is simply go ahead and declare few Global keys say underscore one equal to Global key okay similarly we will create few more keys which is one two and three okay so let's we have this Keys now inside our showcase widget we'll give this key which is one and the description that will be used to show the title when our showcase is initiated okay so let's suppose this is icon we remove this const okay let's just save the app so now let's suppose we'll wrap our flutter logo with the same widget called showcase will provide the key which is our second key and the description says this is logo similarly what we can do is let's wrap our card now here's the new widget which is Showcase with Widget so with this you can have a custom widget for you widget okay so let's suppose it takes in a few extra parameters which is height width okay so first we'll give our key which is three let's suppose give it a height of 100 width of 200 and a container which will be used to show this custom widget when it will initiated okay so let's suppose we have a container as a custom widget will give it a higher talk let's say 5th hundred and the width of 200 the same we'll give it a color let's say it will give the colors of yellow and we'll give it a child at the center and for the child we'll have a text or any widget that you want to show for now we'll just show the text custom widget okay with style textile and the font size of let's say 30 okay so let's just save the app so now if you want to start this showcase what you can do is inside our this on press of our elevated button what we can do is let's go to our on press and we have our showcase widget Dot of context dot start showcase and here we have to pass on our Global IDs okay so let's pass our Global IDs that is one two and three okay so let's just save the app so now what we can do is let's start our showcase by clicking on the button so as you can see we have this icon logo and our custom widget so this is how you can show the circus widget so let's suppose we have to show this automatically at the start of your app so what you can do is let's suppose we need to First remove this case Vision okay so what we can do is let's remove our list view again and what we can do is remove this the test now this is our list view okay so now inside our main what we can do will again create a new stateless widget suppose let's call it as a start vision okay and then and this will be our main showcase visit with text in the Builder will pass in our context and we'll return our demo app and here we have a few options called autoplay to true you can also set our delay that is the duration let's say we keep it a duration of two seconds and inside our material app it will be our start widget okay start widget okay so now let's just save the app go to your demo app and inside unit state what you can do is visit binding setup binding Dot it's not widget binding and post frame which is as you can go to the documentations and have a look widget binding copy this and paste this so now as you can see we have to pass the same keys that we are using let's just save the app okay so run the app so we'll hot reload our app again [Music] okay so now as you can see this is automatically initiated after two seconds we can see our showcase View and it will close by itself okay so this is how you can use the Showcase widget in your app in flutter hope you found this video helpful do like share subscribe to my channel and see you in the next video

Channel: Dhanraj Nilkanth

Views: 1,993

Keywords: dhanraj nilkanth, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, showcase view, flutter app showcase, flutter onboarding screen, flutter onboarding screen only one time, flutter onboarding, flutter widgets, flutter intro

Id: I-AZQP4Yctg

Length: 9min 33sec (573 seconds)

Published: Fri Jul 21 2023