This article provides a detailed guide on retrieving an image from Firebase Storage and storing it in FlutterFlow's Page State as an Uploaded File (Bytes).
It involves the following steps:
Create Cloud Function:
Fetches a random image from Firebase Storage in binary format using Signed URLs for secure access.
Utilizes CORS middleware for cross-origin requests and Axios for fetching the image.
Deploy the Cloud Function and obtain the URL for use in FlutterFlow.
Create Custom Action in FlutterFlow:
Develop a custom action that:
Calls the deployed Cloud Function using HTTP GET.
Receives the image in binary format.
Converts and stores it as an FFUploadedFile in Page State.
FlutterFlow UI Integration:
Design a page with an Image widget and a Button.
On button click, the custom action is triggered, and the image is stored in a Page State variable (imgFFUploadedFile).
Display Image:
A custom function getImage() is created to convert the stored image bytes into a Base64 string.
The Image widget dynamically displays the image using this Base64 string.
This method allows developers to efficiently manage and display images from Firebase in FlutterFlow apps.
For more information, please visit the below article:
https://www.flutterflowdevs.com/blog/retrieve-image-from-firebase-storage-and-store-in-flutterflow-page-state-uploaded-file-bytes-variable