Flutter Tutorial - How To Use File Picker | The Right Way | Android, iOS, Web & Desktop

how to pick files from the device's storage via native file picker after it we will open these files internally within our own flutter app or externally with other native applications to display pdf files video files music files and images from the local phone storage if you're new here subscribe to my channel and make sure to watch this video till the end we will use the file picker package for picking any files from the phone storage let's get started with this elevated button pick file that you see here on the right side and if we press on this button then we want to call here on our file picker from this package the method pick files with this if i press on this button then we have here all the files from our phone storage and we can basically pick here a file in case we pick here no file then it returns here as our result null and then we don't want to handle this case however if this result is not null then we have picked here a file from the right side and in our case we simply want to open this file up therefore we get first of all from the results one specific part that we have chosen and then we open this file up inside of a new method and therefore we can use here this package open file to open this file up and to make use of this file picker and also open file package you need to go to your pubspec yemo file and here under your dependencies you need to include then the file picker and open file package let's also try it out if i click here on this image then he opens the image up in the gallery if i choose here a pdf document then he also opens this pdf document here up in our ui and the same also works if you choose a video then he is playing the video with the help of a native app on the phone and you could also select your music and then he is starting to play the music here at the top and you can even change it if you like in general from the file that is selected through the file picker you can access some data so let's try it out i select here one image and now you can see here the name the extension and the size of the file that you have picked on flutter web you will get here some bytes returned and on all other platforms you have the path to the file itself and as you notice the pass is stored inside of a cache folder and this means if you restart your application then this cache is deleted and you wouldn't have any access to this file anymore therefore we want to save our cached file permanently and therefore i create a new method where i put the file inside and inside of this new method we get first of all the app storage where we can save our file secondly we create them based on this app storage our new location so this is the directory and secondly we also define here the name of the file where we want to store it and lastly we want to copy here this cached file inside of our new file and we also return it so we return here a file that we can basically await here so this is the new file where we have stored our cached file inside and lastly let's print the old file and also the new file as a path inside of the console and with this if we select our file then our cached file is copied to this new path which we can use permanently even if we restart our application next you can use your file picker to also pick multiple files therefore you need to set here this flag to true and now we also want to open these files therefore we access here these time all files and i create a new method open files and here inside we navigate then to a new page that i have created where i put then all the files inside as a result i can click on this button and we can select here multiple files when you have finished with the selection you click on select and now i display here all the selected files inside of this files page that i have created so i have created here this file page and inside of the build method i create a grid view so that we display here our files and each of the files that we display here is inside of this build file method where i basically determine first of all the file size that is here then displayed so sometimes we have megabytes sometimes we have kilobytes next to the size we also get the extension what we also have looked at before and all of this information i basically display them in some text widgets under each other so we display the file name here and also the file size we also can click on one file in this case the pdf document and this will then open it up and this is because i have implemented here this on tap handler and then we basically call the open file package to open our file let's also go back into the main file and let's look at the pick files method where we can implement some custom types so here with this allowed extensions you can define that only pdf documents and mp4 files can be opened let's also try it out if i open the file picker then you see we can only select here the documents pdf and also here we can select the mp4 videos however we cannot select here any other files you also have here some convenient types so you can select your audio image media and video so let's select here for example video as a result if i open the file picker then we can only select your video files inside of our file picker and finally next to android you can also run your file picker on ios and also on flutter web and desktop for flutter web everything works fine so you don't need to configure here anything for flutter desktop you need to run here one of these commands inside of your flat up project depending on your platform for android the debug build should run fine with the file picker however if you have a release build then you need to take care about these extra steps and finally for ios you only need to make sure that you have inside of your pod file this use frameworks so go within the ios folder to your pod file and here you need to make sure that you have this use frameworks inside for ios you can also add here some optional permissions and this is especially needed if you use here the file type any custom or if you use file type audio if you use file type video and file type image if you use here one of these file types in your file picker then you can simply copy here the code go here to your info plist file and here you scroll all the way down and then you simply paste here this key value pair inside and by the way if you want to get here this whole source code of this application then you can get it 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: 54,823

Keywords: dart, dart flutter, file explorer, file picker, file picker package, filepicker in flutter, files, flutter, flutter file extension, flutter file image, flutter file path, flutter file picker, flutter file picker example, flutter file size, flutter open files, flutter read files, flutter tutorial, flutter tutorial for beginners, image picker, ios, linux, mac, macos, web, windows, image picker flutter, flutter pick image, flutter pick file, flutter open file from path, pdf, video, music

Id: LlO5jydXws0

Length: 7min 10sec (430 seconds)

Published: Tue Oct 05 2021