Highlight widget step by step - Flutter tutorial 2023

hello guys and welcome back to my channel in today's video we'll be looking at how to highlight the particular widget and show the use to your users if you just created a very fantastic app but he somehow looks complicated and then we want to show your users what each button stands for what the function of a button is or the function of a picture a particular widget is in your app in today's video we'll be looking at how to do that and for this tutorial you need this package called the Showcase View and sharply install that in your postpaid.yamo file and without wasting time if you are new you are currently subscribe to my channel and let's get started so as you know you import the Showcase view package in your app and yeah I just have my stateless widgets with my material app on my scaffold so let's create a body for that and in my body I'll be having a showcase widgets so this showcase we just will be what is wrapping around all the widgets you want to showcase like it's just like a material app which is showing that it's using the material UI in your floater app or like your co-partina which is using the compatino you are in your floater app so this showcase we just it's just to show that it's wrapping around all the widgets you want to showcase so you have my Builder for my Builder will take context all right and then I'll direct it to the page in which I want to showcase my widgets now I have not created that yet so let me create that it will be a stateful widget and it's record show and we can see the error is gone so yeah I also have my scaffold and I'll have my app which would be my Alpha so in my up bar I would love to have my title because texts and then I'll have maybe showcase this widget I love my trailing let me see how my leading and my actions so in the leading I have an icon too icon it should be icons dots let's just choose one AC units and then in my actions I'll have something to so I can also have a button here icon an icon I mean icons dots ABC all right and I also love to have a floating action button so let's call it a floating action button Floating Action button Floating Action button here nothing happens when we press it and then let's have okay sorry about this and then I'll have my child there should be an icon too icons Dot alarm all right and if I should run this app as you can see this is the app and does not showcase anything so how do we add it here let me remove the debug Banner so that this will be icon will show so debug to force okay and there you can see so the thing we need to do now is to wrap each of the icons we want to showcase in a showcase widgets so for example this wrap with showcase all right and there are some parameters needed like the key you need a key and we need a description so let's wrap this around two the leading graph with showcase and add your key and the description and the third one in my icon here showcase key and description so do it for all the widgets you want to showcase showcase key description all right oh I wrapped the wrong widgets so it should be my texts showcase and you have a key and description key description all right so now we have all these it's time to create our key so our my Global key and I can call the first one equals to global key Global key the next one since I have four widgets I'm showcasing so I'll create four of these Global keys Global key Global key three equals to Global key and Global key for equals to Global key okay so let's have them here one two three four okay and let's add our description so the description will be a text so I can say this is the leading icon this is the app but title up title this is the trailing this is the trailing and also for your description you can have a title let's see that yeah you can have a title so you can see floating button and this is a floating button okay now if I should restart my app nothing happens yet and why is that because we have not specified where we want the Showcase to start now as I want my showcase to start anytime I run the app or anytime I restart the app I have an init function and yeah I'll have widgets binding dot instance dot add whole frame callback and there inside there we specify the event we want to trigger so I'll show you showcase widgets dot of context dot starts showcase and inside there we have the global Keys we have created so since I've created for above before inside the one two three and the last one four okay and if I should restart it let's wait for this you can see it is highlighting the particular videos now if I click on it it will go to the next widget to the next widget and then the last one with the title and we can see the Showcase widget so this is how to do the tutorial for your showcase if you enjoyed this tutorial kind of subscribe to the channel and I will see you in the next lesson

Channel: Vikkybliz

Views: 1,505

Keywords: flutter, codin, coding, flutter developement, highlight flutter, showcase flutter, flutter code, vikkybliz, coding in flutter, flutter tutorial, beginners, flutter tutorial for beginners, flutter project, highlight widget, showcase widget

Id: fPmyvan0UJQ

Length: 10min 26sec (626 seconds)

Published: Mon Jan 16 2023