Flutter Tutorial - Desktop Drag and Drop Files | Drop Files Into Dropzone

how to drag and drop files on flutter desktop with the package desktop drop which works for windows linux and mac os if you're new here subscribe to my channel and make sure to watch this video till the end let's get started within the build method by creating a simple blue container and we also give it some text so the people can drag and drop their files here inside and now around this container we want to represent this drop target widget which comes from this package and here inside you can then supply the on drag done and here you get then every time the urls of the files that are dragged here inside of this blue container and finally we want to add then these urls to a list in our state and also make sure to wrap here the set state around so that your ui gets updated and lastly we want to create here in our state then a list or you can also take a set if you like and finally we want to show then some previews of the files that we have dragged here inside and therefore i simply wrap here this drop target inside of a column and under our drop target we want to display then simply our files and therefore i create a new method build files and inside of this method we create the list view and then we map here over each of the files that we have put then inside of the set or list and for each of these files we create the method build file and lastly we get then here each file that we have dragged and dropped here inside of this blue zone and we simply want to display then in this case an image so we simply take then here the file path and convert it to a file and display that in an image let's also try it out i simply drag and drop an image inside of the blue zone and then we see here the image below and you can do the same thing also with multiple images then they are also here displayed and to make this work also go to your pop spec jammer file and here under your dependencies you need to include them this desktop drop package if we then drag here a file inside which is not an image then we get here obviously an exception so he cannot display this image and therefore we also want to check here if this is an image if it is a jpeg for example otherwise we want to display them the text no preview and therefore we simply check here from this file pass if it ends with this jpeg format alternatively you can also create a list tile and here you put then an icon inside and also the path of this file that we have dragged and dropped inside so here i simply display the pass and on top of it we display then here also this icon in case you don't want to display the full pass of your file you can also trim it simply and therefore you simply display only the last part which is the extension part and with this you have always the file name and also the extension of this file that you have dragged and dropped here inside it is also important to give the user some feedback if he drags a file inside of our zone so that he knows that he can simply drop it there to implement this is pretty simple simply go to your drop target widget and here you have two properties on drag enter it and exit so if we enter with a file this drag and drop zone then we want to set here this is dragging flag to true otherwise we set it to false in case we exit this drag and drop field again let's also create this boolean field here inside of our state and now depending on this is dragging field we want to change then simply the color of our container so if we are currently dragging over it then we have a red color instead let's also try it out i simply drag your file inside and you see it changes in the color and finally you could also change here the ui of your drag and drop example so that you also have your for example this border around and you find both variants inside of the source code with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel [Music]

Channel: HeyFlutter․com

Views: 7,255

Keywords: drag, drag and drop, drag and drop dropzone, drag and drop flutter, drag around, drag drop, drag drop flutter, drag target, drag-n-drop, draggable flutter, draggable widget flutter, flutter, flutter desktop, flutter drag drop, flutter drag widget, flutter dropzone, flutter macos, flutter move widget, flutter windows, flutter windows app, flutter windows desktop app, landing zones, windows app flutter

Id: uYYlVx1W4Rs

Length: 4min 23sec (263 seconds)

Published: Fri Aug 27 2021