How to save image using flutter and firebase | firebase_storage | upload using putFile() | Part 2

selecting the profile image was learned in the last video in this video we can learn how to save the selected image can be saved with two text field data we learned that earlier add two text field below the stack widget name and bio text field decoration input decoration hint text enter name content padding Edge insets all 10. change the main axis alignment to cross axis alignment add a sized box on top of the tack height 24. and add another one below the stack align this widgets in Center wrap the column with the container widget padding Edge inset symmetrical horizontal 32 then add a border to the text field border outline input border add a sized box below and add another text field for bio then add a sized box then add elevated button text save profile on pressed function name save profile create a function save profile now we can save the image and text fields declare two text editing controller variables to retrieve data name controller and bio controller add controllers and text fields remove const create a new Firebase project we learned that earlier add these dependencies in pubspec.yaml Firebase core is a foundation package that allows flutter developers to use various Firebase service in their applications cloud firestore is a package that allows flutter developers easily integrate with and utilize the cloud firestore database making it easier to store retrieve and manipulate data in real time Firebase cloud storage is a cloud-based storage solution that allows you to store and retrieve user generated content like images videos audio files and other binary data pubget openvoid Main import Firebase core initialize Firebase in void Main enable cloud firestore that is studied earlier enable cloud storage here is the option to create new folder but we are creating it using program this used for store image files Firebase storage dependency is using for that create a new directory resources and create a dart file inside that directory save data Dart import material Dart create a class store data create a function to upload image create Firebase storage instance storage Firebase storage.instance package is imported create function string upload image to storage a sync pass arguments string child name this is file name storage.ref.child name that is the file name reference ref erence in Dart is a type of data that points to an object in memory it is used to occur in objects data and behavior as well as to pass objects between functions upload task upload task is refers to the process of uploading a file or data to a remote server or cloud storage upload task equals ref.put data file task snapshot task snapshot in flutter is an object that represents the current state of an asynchronous task such as an upload or download task it provides information about the progress of the task and any errors they may have occurred during the task snapshot equals upload task variable awaitsnapshot.ref.getownloadurl that return URL string download URL return that URL variable then we create a Firebase for Save name bio image link create a function that returns string future string function name save data parameters required string name required string bio required Unit 8 list file a sink include try catch block catch error variable declare a return variable string RSP RSP equals some error occurred RSP equals air.tostring return ISP then inside try block first we call the upload image function child name is file name profile image file is past image file await it returns a string URL link image URL equals then save name bio and URL in collection use this firestore instance await firestore.collection give a collection name user profile dot add pass the datus name value is variable name bio variable bio then image link that is returned in here image URL RSP equals success open main.dart then call the function in here sync string resp equals first import resources add data.dart resp await store data class dot save data function then collect data string name name controller.txt string bio biocontroller.txt name and bio variables file is image variable null check open add data.dart check there is value if name is not empty or bio is not empty run the app select image enter data save open Firebase storage image is saved then open firestore database data saved this is image link copy the link paste it in a browser it is not display it is downloaded this is image drag it in a browser image is opened select another image give another name and bio save another data saved but in storage there is no new image actually this is a new image and it has been overwritten because the name is the same actually the profile image should be saved during sign in registration which we learned earlier the ID generated during sign in registration should be used here then unique file name will be generated the profile image given first will be created as a folder thank you for watching

Channel: True Coders

Views: 11,894

Keywords: save image using flutter, flutter firebase save photo, store photo using flutter, flutter save photo

Id: 5kjjkIdwwN8

Length: 15min 17sec (917 seconds)

Published: Sat Apr 15 2023