Drag & Drop Tutorial

in this video I'm going to show you how to make drag and drop interfaces like this and like this so let's do it now while it looks like you're moving around widgets in the widget tree that's actually not what's going on while you are visually dragging the widget and dropping it somewhere else what's being moved is the data and it looks like you're moving the widget because there's a widget to accept that data and then display it and this happens through two widgets the draggable widget that's the widget that you drag and the drag Target that's where you drop it so let's implement this drag and drop on this UI right here the first step is to add your dragable that is what thing do you want the user to be able to drag and on this UI right here it is this item down here so I've got a row and these are going to be these color swatches so I'm just going to add that dragable in here and then add my container to that dragable and this is the order you want the thing that you want the user to be able to drag you want inside the dragable you don't want to put your dragable inside that thing because whatever is inside the dragable will be able to be dragged next step is to define the data type that is what kind of data will be transferred when the user drags and drops your elements so here they're going to be colors so let's just select color next we actually have to add the value so we said what type of data it's a color but here we want to actually give it a value so you could hardcode a value right here but normally you're going to be using a dynamically generated value so let me show you how to do that I have an appstate variable of colors right here it's a list of colors I've got defined so let's have that let's come down to my row right here and let's bind that App State variable to this right here and we'll say color swatches and save so now we have these items right here so now we can go back to our draggable and we can bind the value coming from our color swatches and let's give a default value right here and confirm okay so now we've defined the value right here but we haven't bound it to our UI so let's just go do that so we're making sure what we're seeing is the same data that you're dragging in so let's come down to our fill color right here and bind that to the same color value that we did above okay so now these items are draggable and they have the values that we want to transfer when the user drags and drops it next we need to define the area where the user can drop it that is the drag Target and for us that's up here on this page background and it works the same way as our dragable here anything inside our drag Target will be able to accept a drag Dr and same process as the dragable we need to define a data type that is what kind of data our drag Target can accept and it is a color all right great we've set up our dragable and our drag Target Let's test it out okay so let's take this we can see we're dragging it in here and when we drop it in nothing happens and this is because we haven't told it to do anything we haven't defined any logic and this is the beauty of flutter flow just like with everything else when some trigger happens like an item is dropped in here you as a developer have to Define what happens so let's go do that so what do we want to happen well the user drags one of these color swatches over here and when they drop it this background changes the value of this background changes so we need some variable to store that and I have a variable set up here which is just a color variable so first let's bind this color variable to this background right here so let's come in here to our fill color and bind this to that color right there I also have a background color and border on this container behind this image that we can bind to as well next let's define our logic so let's go up to our drag Target right here and just like we write all of our business logic it's going to be in here in our action flow editor and you can see up here we have three triggers available so on drag accept so that's when the user drops a dragable in here on drag enter that's when the user drags a dragable over the drag Target but hasn't released their Mouse yet like a hover State and when they hover out or drag out well we want to apply this logic when it's wrapped in so let's add an action and we want to update that state variable we defined that color variable there it is and we want to set a value to this and we want it to be whatever value is Dragged In well where is that well if you open up this drag Target right here we can see we've got this dragged data that is the data that's Dragged In and that's what we want and that's it let's go test it out all right so now if we drag this in here beautiful it changes color just like we would expect next let's take a look at a more complex example in this demo we'll be using a firestore collection of employees that you can add on to two different teams so let's start out by adding our drag ball so we want the employees down here to be draggable so let's come into our widget tree and since these will be dynamically generated we need to set up that binding now already on page load over here I'm querying my firestore collection of users and adding that into a page State variable called employees and this is just a list of documents now why didn't I just add this as a backend query well when you need more control over over your queries that's when you want to follow this pattern okay so let's go bind this variable to our grid view over here so let's come over to our generate children from variable and to our page State and find our employees list variable we'll call this employees list and save now let's bind the properties that we need so we want to apply this path here to our employees list item and the photo okay so now we want to put this into a draggable right here and now we could use the wrapping shortcut command B but at the time of this video our dragable hasn't been added here yet but there's an easy way to get around this so you can use the shortcut command or control X to copy it to your clipboard then add in your dragable here and then we can paste in our widget on our clipboard okay now we need to go to our draggable properties here and tell it what kind of data this is here it's a fir store document and we only have one type here and it is our users next let's bind the value right here and it's this employees list item and confirm so our dragable is set up now we need to set up the targets for where these can be dropped and we have two here team one and team two so let's come over to team one here let's come up to our column right here and add a drag Target and we can just collapse these and let's set up up the data type here so when we duplicate it and add it to both we don't have to redo our work this will accept a document right here it's the same as before and great so now let's duplicate this drag Target and we can drag in our team one and team two widget trees now when we did that we have some layout issues right here and that's because on our containers right here we had an expanded property applied that was stripped away because it was a direct child of a column that's why we had access to it and now we don't but we can just apply that to our drag targets right here and we get back our layout one last thing we need to do is you can see when we have our drag Target selected here that it's this entire space including this right here so we don't want that we want it to be visually mapped to just this white area right here because that's logical so let's just come to our team right here and remove this padding and we can just apply that to our drag Target up here and then we will be all good and we can do the same logic to this one down here so let's add in 24 pixels right there and then come to our team here and remove it great so we've set up our drag our drag targets where we can drag our drages and finally we need to Define our logic that is when an employee is dragged into each one of these what happens well we want them add added into this list of employees right here so we're going to need a variable to store these right here and I have two setup on our page right here I've got Team 1 and team two and these are just lists of user documents and of course this is a pattern we've seen before where we've got a variable in here that we will update so first let's bind that variable to our list right here so let's come into this row right here let's twirl it open and you can see the structure is that we have a column of rows so we can come into our generating Dynamic children right here this is our team one so we can say team one and call it team one list and save and the same thing down here not on our row but on that column right there let's come over here and this will be our team two list of employees so team two list and save great now let's bind our properties so here we'll be bound to a display name right here and we want this to be an email of our employees so right there and their picture so let's come in here and grab the photo URL and we can just do the same thing up here so we have their display name and their email address and their photo and there we go okay so we're displaying those documents in our team 1 and Team 2 variables right here but we haven't written any logic to add them into that list when the user drags and drops them in here so let's do that now so let's come into our top drag Target right here and come into our action flow editor and when it is accepted right here that is when the user drops it in we want to update that page State variable and it's this first one right here we want to add to the list right here and we want to add whatever is Dragged In that's our dragged data and confirm great let's test that out before we apply the same logic to our second one right here all right let's take our first employee here and drop her in wonderful but once the user has been added up here we want them removed from the employees list down here all right let's go do that so where would we Define this logic well that's something we want to happen when the user is dragged in here okay so let's go back to our drag Target here and open this up and what we want to happen is when the user is Dragged In we want to not only add them to this list but remove them from that other list down there which is our employees list right here so we want to say remove from list and what we want removed is that drag Target one confirm all right let's test that out so let's take our employee here and drop her in and beautiful she's removed from our employ employees list so now we can apply that same logic to our drag Target over here and we can just come to our drag Target right here and open this up and copy this action right here and then come over to our drag Target right here and paste it in let's open it up because here it's not team one but team two so we can remove this add a field team two that's what we're adding to adding this to the list and it's our drag data and confirm so this is good and we want that removed from that employees list down there as well so that should be good as well let's test this out so we can drag our employees in up here or in the bottom one great but what if we made a mistake and we dragged Emily onto team two but we want her on team one well right now we can't drag her anywhere and that's of course because these widgets aren't wrapped in a dragable but we can do that and it's no problem to have a dragable inside a drag Target so let's come over to our team one up here and we can do our same trick as before so I'm going to select my row right here Commander contrl X to copy it to the clipboard then paste in a draggable and then we can paste in what's on our clipboard remember to set the data type which is a document of users and to bind it to that value right there and then we can do the same thing down here so select that cut it to the clipboard dragable and paste it in then we set our data type it is a document of type users and the value is this item great so now these can be dragged and you might think okay so we have to apply the logic to the drag Target that's the next step right but we've already set that up that is we've already defined the logic in our drag targets for what we want to happen when a dragable is dropped in there and it doesn't matter where the dragable comes from before we were dragging it from here but it can be dragged from here as well so let's test this out so let's drag her into the top and we made a mistake so let's drag her down here to team two and that works sort of because while she's added in here we haven't removed Jessica from up here well that's easy we've already seen this logic before we can just remove her from that other list so in this second target down here let's open up our action flow editor and we remove that employee from this employees list added them to team two but let's also remove them from team one so we can come in here we can remove from the list and we're removing whatever was dragged in great now let's just apply that same logic to our drag Target up here let's open that up we're adding to Team One removing from our employees list and we are removing from Team two as well so remove from list and whatever is Dragged In confirm awesome Let's test this so let's drag her into team one and let's remove her and put her in team two beautiful the last thing we're going to do is add in a visual affordance that is when you're designing drag and drop interfaces it's a good practice to give a visual indication to your user what's going to happen so for instance when I have a user here and I'm dragging them over team one right here it's good to indicate to the user when you're in and you're out of your drag Target so that we have an indication that some action will occur when I release this employee right now the only way we know is because we designed it so what we could do is we could add a border in here when a draggable is dragged above here and I've already set up a variable that we can use for this a border for the top one and a border for the bottom so let's go bind those right now so in team one here let's come down to our border color and let's bind that to our page State variable of Border one and we'll set a default value right there and then let's do the same thing with our second container down here our border color let's set that to our border 2 set our default value here and confirm now let's set up the logic so let's start up here with our top one and let's come into our action flow editor and here we want to execute some Logic on drag enter and what do we want to do well we want to change that variable so State Management page State we want our border one and we want to set the value to something else and we can set it to this secondary gray color okay let's go test this out so let's take an employee here and when we drag them in that works great sort of so when we drag the user over we do see this border but we want it removed when we drop her in here okay let's go do that so we can come into our drag Target up here let's come back into our action flow editor and what do we want to happen well when it's accepted when we drop the user in we have to update that variable so we just need to add that variable inside here so we're going to grab border color one and we can just reset that value let's test it out now so let's take our user we drag her in here we release and it goes away wonderful let's try again with Christopher here so we drag in but let's not put him here let's put him over here and we see another problem we have and that's because this logic is being applied on drag enter but we haven't defined any logic for on drag exit so we can do that now so back in our first one let's open this up and come over to UND drag exit right here we're doing the same thing we've done before so updating a page State variable that is our border color one and we want to reset it let's test that so let's grab Christopher up here let's put him in here but no and that works beautifully then you can just apply that same logic to team too and you'd be all good and that's how to use the draggable and drag Target widgets in flutter flow to create Dynamic drag and drop interfaces in flutter flow

Channel: FlutterFlow

Views: 13,085

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, drag and drop, draggable

Id: oIHIlLq16rI

Length: 18min 29sec (1109 seconds)

Published: Fri Apr 19 2024