How to show photos from Firebase Storage in Flutter

One of the beauties of cloud storage is that your app doesn’t need to get bogged down with massive amounts of data from photos and videos. Firebase provides a simple and easy to use solution for storing this data called Firebase Storage. Firebase Storage allows users to store files of various types at a scalable price, meaning that if you only store a handful of files it won’t cost anything, but as you scale up the capacity of your storage, your costs will increment accordingly. It’s a very nice solution for startups and small developers to utilize in their apps, hence why it’s so popular to use with Flutter and other mobile applications.

Setting up and using Firebase Storage in Flutter is very easy. I’m only going to be covering setup and reading data from Firebase Storage, not writing to.

[1] Setup:

Firebase Project Dashboard

If you haven’t done so yet, go ahead and create a new project on firebase.google.com. You’re then going to want to make sure you have your flutter application setup to connect to firebase. If you need help on how to set that up, see the following article: https://itnext.io/firebase-authentication-in-flutter-2020-made-simple-19eaad197bfe

Next, you’re going to want to click on “Storage”, as that is the primary functionality that we are focusing on.

Firebase Storage

You’re going to want to step through the steps on setting up your storage instance and go ahead and add in any files that you want to use. If you’ve already got all of this set up go ahead and skip ahead.

[2] Add Package

You’re next going to want to install the cloud_firestore package: https://pub.dev/packages/firebase_storage.

Add dependency:

dependencies:   
    firebase_storage: ^3.1.6

Import to file where you want to read data from:

import 'firebase_storage/firebase_storage.dart';

[3] Add code for reading files

We first want to create a simple service class that we can call whenever we want to read a particular file URL.

class FireStorageService extends ChangeNotifier {
  FireStorageService();
  static Future<dynamic> loadImage(BuildContext context, String Image) async {
    return await FirebaseStorage.instance.ref().child(Image).getDownloadURL();
  }
}

You can add this at the very bottom of the file that you want to display your images in.

Next, we want to create a future method that takes in the name of the file we want to grab and references our new service class and downloads the image.

Future<Widget> _getImage(BuildContext context, String imageName) async {
  Image image;
  await FireStorageService._loadImage_(context, imageName).then((value) {
    image = Image.network(value.toString(), fit: BoxFit.scaleDown);
  });
  return image;
}

This method is going to return a widget that our FutureBuilder can reference. Note how we call our service “loadImage” method to get our URL and then use that URL to create an Image widget.

Last, we want to add a FutureBuilder inside of whatever container we want our image to appear in.

FutureBuilder(
  future: _getImage(context, "avatar1.png"),
  builder: (context, snapshot){
    if(snapshot.connectionState == ConnectionState.done){
      return Container(
        width: MediaQuery._of_(context).size.width / 1.2,
        height: MediaQuery._of_(context).size.width / 1.2,
        child: snapshot.data,
      );
    }

    if(snapshot.connectionState == ConnectionState.waiting){
      return Container(
        width: MediaQuery._of_(context).size.width / 1.2,
        height: MediaQuery._of_(context).size.width / 1.2,
        child: CircularProgressIndicator(),
      );
    }

    return Container();
  }
),

We have 2 key things that we are doing inside of our builder.

First, we want to check the connectionState and see if it’s still waiting for the image to load. If it is still in the “waiting” state then we want to return a CircularProgressIndicator to the client so they can see visually that it’s still rendering, and not broken.

Next, we want to see when the connectionState is done. When it is done, we simply want to reference our snapshot.data widget and return it inside of a container. The width and height can be ignored or modified and additional styling can be added around the Image widget.

And that’s it! Pretty simple. Alternatively, instead of using “Image.network” you could use a CachedNetworkImage using the cached_network_image package: https://pub.dev/packages/cached_network_image.

For more daily Flutter content and tutorials check out BleylDev on Youtube , Twitter , and Instagram .