Flutter Tutorial - Showcase in Flutter

hi welcome to next tutorial on flutter Johnson today we are going to learn how to implement Showcase in flutter and what is and showcase and why it is used we are going to discuss and then we are going to prepare the uh tutorial Preparatory project to demonstrate how to how to implement Showcase in flutter and an apps UI is great when the user can easily navigate and go through the app's functionality without any problem one of the best ways to reduce this friction and make the user experience better is to highlight and showcase the essential and integral parts of your app and this is particularly useful when a user launches your app for the first very first time or when there is an important update and new functionality and showcase is a very customizable and simple to implement package you can use to show your show your users the most important features of your photograph with the assistance of a showcase and showcase widget we can showcase the feature in this flutter application and before moving on to our project let's see how our final application will be behaving [Music] as you can see here when the application first runs we have our first showcase here the uh menu icon and here press here to open the drawer when pressing this uh menu hamburger icon we are going to open the menu icon this is the art and one click again and this is the title and then we have our profile section here and uh the uh description and on our body and then on our swap button here and you can see here we have the five Keys one two three and four and five and this is how our final applications are will be adding now let's move to our project and before that if you haven't subscribed the channel don't forget to subscribe and press the Bell icon so that you can get notified and upcoming videos right now let's uh move to our project and before that we are going to use the package named showcase view we need to use this uh we are going to use this package and Implement our Showcase in our application so I would copy this and then on pop set the tml file in the popsack.ama file I am going to paste it on the dependencies here and then run pop get and we have our package get you can see our exit code 0 and now we import our and lactogen sum now we import our SS file and for that to import the assets let's create the folder in the root directory name it assets and then I copied this image and then drag it to my SS folder yeah after importing I have named this assets to okay water junction dot PNG and then we need to import this edges to our offset.yaml file as you can see here assets let's uncomment this and when using the popstar.aml file you need to be careful about the space and indentation and uh whenever if there is more space or less space and you could you could either so be careful about it slash and we are we have given the path to the asset folder in our offset.yaml fine and after all this configuration now let's move to our code scroll this and then to our main dot dot file here right now let's do some cleaning here okay we don't need this and then this homepage also we are going to create our own home base our own showcase widget so let's delete this after some cleaning let's create the new file named homepage. and it is going to be stateful widget and when pressing St and control space in vs code you can find the list of options and this is going to be flutter stateful widget and I will name it home page and import the material shorter material dot dot and then we return scaffold emulator and for now let's apart then let's import our home page to our main.file our room would be home base and then we import the home page to our main dot dot file put dot slash template dot dot and we are ready to go and before implementing this forecast for individual widgets you need to wrap the page showing the Showcase with a showcase widget and it consists of the required Builder parameter consisting Builder widget returning our home page in the home page we need to have we need to have the Builder showcase build a rapid Builder and then showcase widget and this Builder consists of Builder okay this consists of Builder and this Builder Builder it consists of Builder and it consists of widget context and then here we return our home page it should be const ant and after wrapping it with a showcase widget now we proceed to our home page and in the demonstration we can see we have the five Keys one two three four and five now we need to uh wrap and we need to create the global key so that our showcase widget knows with uh widget is being socased first or second or third and for that final Global key it is a scaffold widget covered k equals state and then our first widget that needs to be shown Global key um let's name it first equals blue ball key and then similarly for other second third fourth and fifth second for fourth and fifth and after defining all the scaffold key and let's give the here Ford and these keys are defined so that our this showcase widget you can see here in main.f file our showcase widget needs to know which uh widgets are to be showcased first so we have uh described a we have mentioned our keys here and to start our uh showcase whenever our home page starts we need to uh call our Unity state and super Dot we need state and then foreign dot instance dot Ed post frame fallback then we call our showcase widget Focus wizard Dot of this context dot start so guess and our keys first second second and then third and then fourth and then fifth here we have we started our showcase it should be widgets and this widgets binding that instant start first frame callback and this callback function guarantees that everything is executed accurately during the build and presently if you run the application our delightful showcase will begin when the test builds and tap through it until this showcase is done and now coming down to our home page we have already have our scaffold key and first we are going to showcase our app bar in Amber hamburger icon as you can see here this is the first thing that needs to be showcased in our application right now let's move it to our first Focus widget now let's first Define our drawer drawer and it has the child and childhood will list View cab is padding to zero different users Dot zero and then the children and until then we have our drawer header with the charge of text that's it say welcome to plotter Johnson let's give some style here and come on stand next with color color start White and one size of size of 24 this should be White and then our header body in our code is being shown either let's see here okay this should be fourth and we need to import our showcase widget I haven't imported our showcase widget so it is showing either all right we have our imported and now let's get back to our code and it is done either here okay we need to have comma here and now our body of our drawer after drawer header and we have our list Style and in leading we have the container container padding first is inserts dot on five and then the container has the width bit of let's keep 45 and then height of 45 and then decoration uh decoration box decoration saved tip dot Circle and then color let's give the primary color theme Dot context dot primary color and refactor it let's beautify our code okay you can see here we have the list type and then we have the leading container with the height and width of 45 and then we have given the uh beautiful decoration that the same Circle and our color would be primary column and then the child would be image dot accept file and give the path to our image let's just slash plotter dot P and J plus junction.png and keep in mind that this uh file name should not be different from the this file name flutter junction.png and this should be same if not you will get the error and then our list Style title first text let's say product Junction okay now we have designed our header and now let's get to our app bar our hand first embarker icon you can see here this hamburger icon would be shown with this drawer header now on the app bar we are going to showcase our our showcase our main light ing we need to call this showcase and it has the key of obviously first we are going to Circuit it first and we have we give the description okay press here to open Drive and then child could be icon button icon and that needs to be clicked and then it has unpressed then it needs to be implemented and then the other is child icon icon I can start menu now let's keep the color the color would be let's give the primary color yeah okay we can copy this and touch it here it is showing the error here and you can see here icon okay the argument icon data can be done with it okay this is the icon data we need to have the icon visit here icon and then our icons menu and then the caller would be of the icon and then we are ready to go and when clicking this icon button we are going to open the dryer you can see here we are going to open this drawer so on click the icon button we are going to open our navigation drawer so scaffold key Dot current state dot open drawer and this opens our drawer now let's run our application first and so that we can move forward cutter run and we can see here our place here to open Draw we have our first suitcase wizard being shown now okay we haven't our menu icon here let's go there and check it first okay we have our icon button here is primary color let's make it white color star white and then we run reload our application again and we can see here our menu icon showing right now let's add a similarly add our other showcase Wizards and the first is the leading uh our menu icon and the other is the title and then on title of the upper we are going to wrap this also with the Showcase and the key would be second and description would be this will be small in description would be subscribe for more videos and then the child 's text okay let's say flutter Junction and then the description okay let's not give this style over here okay now when we restart it again and we can see we have our first showcase and the menu press here to Open Drawer the description and here our title for results are with subscribe for more videos now let's uh apply showcase to our third widget that is to be action in an action button actions this should be array similar to other first we need to have suitcase and then the key would be this should be third similarly the description description and let's keep the description um that would be a press here to view profile and then the child container so let's format it first and then our child inside the container let's give some padding of five is inserts.all five and then wait let's say 45 and height of 45 and decoration a box decoration we are going to make it circled box decoration and Save box save dot Circle okay and then the child this will be Circle say early Circle and let's see const and then our side would be image I said slash Turtle Junction dot PNG our asset file that we have added before and container it is closer this should be inside the child container here similarly let's reload it again restart it again okay sorry we have to restart it so that our showcase is started from the beginning and we can see here we have our first showcase another second you can see we have the thought showcase now let's similarly okay it is not so much visible let's keep the column to Corner start over here and reload it again okay okay we have our color given here we need to press our place our caller to our decoration you can see the background color is white and when you click we have our scaffold drawer open right now we have our thoughts focused uh the successfully solved now let's uh go to our fourth showcase that will be our body and let's minimize our terminal and then the upper now body our body body column and let's give the children and our alignment first main axis alignment main axis alignment Dot Center and then process alignment alignment Dot Center let's replace our send off and then our children would be Center uh child showcase this needs to be socket and then the key it need to have key and our fourth key and description will be let's say flutter Junction alizes in between portrait topics on flutter and then outside foreign skip some height let's say um 300 and wait also 300 foreign we have our showcase started and then second our title flutter Junction and then our profile representative view profile and then the image and plotted also is visualize our description button and then now similarly let's move to our fifth showcase provision and that would be a floating action button okay let's minimize it and then close the body or column is here comma and then the floating action button recording action button and similarly we need to have this showcase and then the key fifth and then the title let's say favorite and then description let's say okay click to add which list and then the our side if I refactor it again and then let's make it Circle Target say powder because Circle powder in the child inside would be our Floating Action button it and it's it must have on pressed you can see here one press is required uh on pressed foreign child and that's already const icon I can start favorite if you are like the favorite and we have our the application created now let's reload it we have our first showcase press here to open the drawer in the order our title subscribe for more videos with the description in the profile here and press here to view profile and then on our body uh with the description and then finally our favorite click here to add which list and we have our home base Zone and in this tutorial I have explained the basic structure of Showcase in flutter and you can play around with the code and for your need and choice and try creating new paste and apply some showcase on it and this was just a simple introduction to showcase the features of freezer interaction and if you love this video don't forget to like comment and share with it with it your friends and if you love this tutorial and want to get updated on more videos uh don't forget to subscribe and press the Bell icon thank you happy coding

Channel: Flutter Junction

Views: 1,362

Keywords: flutter, flutter tutorial, demo projects, learn flutter, dart, flutter video, flutter projects, projects in flutter, flutter basics, flutter fo beginners, learnflutter, basic in flutter, programming, learn programming, programming for beginners, flutter course, dart course, flutter full course, flutter tutorial for beginners, app developement

Id: VTAjHHMu5So

Length: 36min 53sec (2213 seconds)

Published: Sun Jan 08 2023