Flutter Flow: Get Values from Multiple Choice Choice Chips (Again)

all right so in this video I'm going to um show you how to get the values from multiple choice choice chips so yeah when you um basically we have Choice chips here and when you select multi where is it switch allow multi select basically I'm just going to show them um in a string right here and so I have a video like this already but like uh the audio is kind of bad and I'm jumping back and forth between my article and yeah there's also I'm doing it a different way this time um yeah so I'll just show you really quick just in case you're new or you may not remember but so yeah yeah that's all it is but um y I'll just go through it really quick and I also have an article here I'll link that in the description and yeah this time I'll just go get straight to it and yeah so I won't go through every I'll show you how to um set it up um I won't like type everything out or anything just to make it quicker yeah try to make it um as fast as possible so first you'll need like a blank homepage or I mean I guess you'll have your own design whatever but for this example um I have just Choice chips and so you can search in the widget palette for Choice chips just drag and drop them there uh you need a button as well so you can search for a button it's usually at the top anyways button and a text field and so yeah for the choice chips add like two options so I have car I left this train icon but yeah whatever I'll keep that SUV and um you also allow multi select and also sit at the top I mean your design will be different added some padding but yeah um yeah last time I did it with um App State so I'll just show you really quick okay so I had I have two App State variables basically so one was the store um basically the choice chips the other one was the string um to show on the page so the string so this time instead of having an app State um V variable for this um text I have a page state so if you click the top level widget um you have to be under the widget tree I believe yeah so if you click the top level widget you'll have this last um tab State management and so you can add a field so you click add field and then you just um give any name I have selected items and I have it as a string and since it's nullable um you have to set a uh default value so I put no selected items so that's the first thing that will show if you remember on the video I just showed um yeah and then what's next Okay so so okay yeah and so I set this I basically set that page that variable here so I'll just show you how to do it in case you're not familiar on how to do that um I'll just remove it so by default it will say hello world but click this little orange icon like settings settings icon whatever um click page State and selected items and here I'll just change the text really quick quick to Shell selected and yeah and so I have action so um I have the action as um on tap update the page state so you click on tap or you I guess your app might be different but yeah State Management update page state or App State depends on your use case but yeah um let's see and so the value I set um is a function so I'll go to the function first um last time I used the action so next this time I'm using a function I don't know why I don't remember why honestly that was like almost two years ago or a year ago but yeah anyways um so this is the action I was setting it to App State and so um yep I was taking the list of card types that was set by the um last time that was set by the choice chips but when I click the button I believe yeah and then so I just turn it into a string so really I just copy for this function I basically just copied um this part right here so you have to go to this custom code tab um add function and you can name it whatever uh I just did list of choice chips and the return value make it string and the make an argument of choice items and make it a list of strings and so yeah the choice chips basically basically gives you uh a list of strings when it's a multiple choice or yeah multiple choice choice chips um yeah so all I'm doing is pulling so taking that um those those Choice items I get from the uh choice chip and then I took that same code and it's just join um join all of those into a stream um so that Al I'm also adding a comma so yeah a comma in a space and yep for each item basically and so yep that's all it is really I'm trying okay I didn't show you how to set it so on value to set you'll click I'll just remove it actually in case you're new um yeah custom functions list of choice chips and then all you do is set go to widget State set Choice chips confirm confirm and yep that's it

Channel: Chris Coffee

Views: 154

Keywords: flutter, flutter choice chip, choice chip flutter, google flutter, multiple select dropdown in flutter, flutter multiple floating button, flutter chips example, commit to flutter, flutter chips input, flutter explained, multiple select dropdown in flutterflow, learn flutter, flutter tutorial, flutter dart, flutter multiselect, flutter tips, flutter flow, receive intent in flutter, on flutter flow, flutter widget, flutter widgets, flutter project, flutter projects

Id: 7evbv39CMu8

Length: 6min 53sec (413 seconds)

Published: Sat Mar 23 2024