vijaycreations
Published in

vijaycreations

Get image from Firebase storage in Flutter Web

In this article we shall discuss about how to read an image from Firebase storage using our flutter web application.

Video Tutorial

Dependencies

Implementation

  1. Add image(s) in Firebase storage by clicking “upload file button”.

2. Update index.html.

Add your Firebase credentials in index.html file present in web folder of your project directory. You can get your Firebase credentials from the Firebase console after creating a web app project in it.

3. Update main.dart.

Add the below two lines of code in your main.dart file. [Line no 2 & 3]

4. Change rules in Firebase console for Firebase storage.

For debugging purpose set the read and write permission as “true”.

rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}

5. Getting image url from Firebase storage.

Make use of getDownloadURL() to get the URL of the image stored in Firebase storage and pass in the image file name. (it’s “Flutter.png” in our example.)

This is how we read image from Firebase storage and display them in our Flutter Web application.

Well that’s it.,🥳., Run the code to see it in action.

Get the complete source code here 👉: https://github.com/vijayinyoutube/image_from_firebase_public

Check out all my Flutter related blogs here.,👇

--

--

--

A list of Flutter Tutorials and app templates

Recommended from Medium

Animating Damage on Sprites — Tracking Damage in Unity

2 Years of Self-Learning Into a Developer

Three Reasons Why You Should Pursue Your Programmer Career in the Western World

Automatically invite and activate users in IBM BPM/BAW on Cloud

Resolvconf settings

Never run carthage bootstrap again

Optimizing Pandas GroupBy 50x using NumPy to speedup an Agent-Based Model — a story of…

Hackathon Digest: ETHDenver 2022

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vijay R

Vijay R

Flutter Developer

More from Medium

Using Firebase Storage in Flutter

Visual Reference: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2F_tyjqozrEPY%2Fmaxresdefault.jpg&f=1&nofb=1

What is the MouseRegion Class in Flutter?

Store Game High Scores in Shared Preferences for Flutter

How to animate FadeInDown with Flutter !