Flutter -  Build Material AlertDialogs (Message, Single-Choice, Multiple-Choice, & TextField)

hello guys in this video i will teach you how to make some other dialogues that's it the message i dialogues and then we had a single choice dialogue and then the next one is the multiple choice dialogue and the dialogue with the text field so that is the goal of this video let's start i will start with the project that had the empty screen with the text in the middle of the screen and now if you want to guess that sort you can get from this link other thing this project in the prospect i already remove everything and just default from the cluster and then you can create that project from the command line and you know how to do that so in this project we had a list of ice creams and then user clicks each item it will display the property dialog based on the items so i will convert the text here to become a list that will hold the list of items now i will use the list tiles to add these items to the list wheel so we have this item like a dialog single choice dialog multiple choice dialog and test fields dialog for each item i mean i had the empty action there we had a list of items we can see had another dialogue single choice dialog multiple choice dialogue and they feel dialogue and now we will handle for each action so for the first action for the first item when we click start it will show the dialogue with the message so in the flash the framework it has supported so dialog and then it has some properties there so now we need to add the context and then we need to build the widget so let's make the first function to shout at that dialogue build the dialog and here we use the sound dialog from the flood store framework we need to supply the contacts and build the two supplies the the widget will be displayed in the screen so here i use the alerts dialog that follows the material standard design and then we had a title which can supply a widget and here we just supply with the text with some information and we had the content here just the text within the message and we had action when user pressed to that action it will dismiss the dialogues i use the flash button to display the button so we can see now you can click address but the item it will solve the other dialogue with the message user can type that yes it will glow or we can outside console cloudant dialog so the next we will build a single choice dialogue basically we review the same the scenario here we installed a lot i lost a lot but it has some update in the content and let's see here i will add the data that will be used in the single choice dialog and multiple choice dialog we won't use the stay phone which to change the status every time you update the items so i will view the chain notifier to help us to handle when users select any item in the single choice dialog so i need to define the single notifier it will have the current country and then it will update that country and get the country back and notify for the uis i add the provider to the spec that will help us to supply the chain notifier to the app so let's open the run app here i use monty provider that supply list of providers and then header chart we pass the my app here so the providers we will supply the chain notifier provider with the first provider here we use the single notifiers that we only defined in the notifiers i will view the single choice dialog functions here we will show dialog from the fluster framework it will supply the context and builder the builder will return the other dialog but here have a little bit different we will have the single notifier get from the context we pass in the main and now we had a single notifier here and then if we returned that alert dialog the title with the text scene select once country that will use the data we've already built in the reverse and then it has contained it will yield a single child scroll level and it has what the child contained and then we had child column to sleep list in that time it makes so it can scroll and next one and then we need to build the list of children here we use the country and we use the map and each item if you view with the radio list tile if you have us to have single choice and optional button here is apply the value stream and the next one is have the group value that's the current selection of that group it has the synthetic we make sure that item can select it on not it doesn't mean the state of the current selected item and then it had the unchanged on change not mean when user change data click to the isotherm is need to update and then it needs to dismiss the dialog we use the navigator of context and pop and then we use in the function when we click the item single choice dialog here called single choice dialog build a single choice dialog and now we can review the app and that that we tried with these functions we created single choice dialog oh yeah the dialog is wheels solved here when user click it is default is resolved with the united kingdom because in the notifier we choose the first item for the default value and if we select another country here we see later germany and then after that we come back if you highlight the terminal here that is on for the single choice dialogue and next step we are going to build select item for the multi-choice dialog new the notifiers to the notifiers class icon multiple notifiers here that's a new class i will add the multiple notifier that helps us to manage the state when user check or uncheck item from the multiple dialog so first i have the list of items that private and then it had the gate to return of selected items from the private valued and then we had the method to check the item only out or not and next one we had add items to check that item not add and then we need to add and notify that smart item has data check on the view and then it also has the remote items methods that will handle behaviorally when you uncheck the item from the multiple choice dialog i will inject the multiple notifier to the main app in the providers i will add the new chain notifier provider and will supply the monthly 4 notifier here here i will implement the multi-modules dialog that connects some multiple choice and it will use the soft dialog from the first framework it should like the context and builder the builder will withstand the alert dialog basically that will the same with the single choice i love but the body we are using the data from the countries and each item will be the test box list tile and here we will get the monthly provider from the contacts we only inject from vivre in the dialog it had a title like one country or many countries because that checkbox and then we had contained with the single child scroll wheel and it had container it have the child column and the least children will be get from the countries the data will only appear in the previous in the late checkbox list title we used a title with the text and we had it on change based on the value it can be added or removed in the multiple notifier that helped us update the status in the dialog and then we had the value to need to check that item only adds to the list or not so that we use the it has item okay update the volume here yeah and then we need to invoke that method in the multiple choice dialog item in the list wheel because we just inject a new notifier to the app so after review we can try with the multiple choice dialog here every time user clicks this item it will update the status here check and uncheck if it not check it will check if it already checked it will uncheck but i forget to add the action here that's it for your task we can add action light in the other dialog here we had action to copy to belong and then we will see action the content okay now here and then action okay here yeah after that you need to close and then see add action so that's one for multiple choice dialog and next we will build the test field dialog when user click here it will show the text field dialog we add the new method that called the node dialogs and in this method i will show you that the shop dialog framework from fluster and then it has a context head builder it will return the dialogue and action when user placed on action it will close that dialog but by the way in the main it had a little bit different here we need to supply the test view and i'm going to use the the from field we can see we don't need auto correct here here to people time i just put the keyboard thai text okay and then i need to decoration because i want to has a note and i configured in both decoration okay we have the hint we need to end here note and then we need to head icon open note out okay that song and after that we need to invoke in our method when user type on the column here so we solve yeah just so yes okay rebuild and then we click here wow that's all for this video so you can see we had the item in this video if you don't use the list wheel with divided item it's only such a line here i think that really really useful for you and then you can see the road my final update project i will commit in my video here so you can easy to see the implementation of different kind of dialogue if you like my video you can surprise thank you i will have lots of video for element influx so i hope it helped you thank you so much and see ya

Channel: Việt Flutter Developers

Views: 8,588

Keywords: vietflutterdevs, speedcode, flutter

Id: dprms0P0rQ0

Length: 18min 31sec (1111 seconds)

Published: Sat Aug 22 2020