How to Use Firebase Storage with Flutter: Simple Guide

To use Firebase Storage with Flutter, add the firebase_storage package, initialize Firebase, then use FirebaseStorage.instance to upload or download files. You can upload files with putFile() and get download URLs with getDownloadURL().

Syntax

Here is the basic syntax to upload and download files using Firebase Storage in Flutter:

• FirebaseStorage.instance.ref('path/to/file'): Gets a reference to the storage location.
• putFile(File file): Uploads a file to the reference.
• getDownloadURL(): Retrieves the public URL of the uploaded file.

dart

final storageRef = FirebaseStorage.instance.ref('uploads/myfile.png');

// Upload a file
final uploadTask = await storageRef.putFile(file);

// Get download URL
final url = await storageRef.getDownloadURL();

Example

This example shows how to pick an image from the device, upload it to Firebase Storage, and get its download URL.

dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  File? _image;
  String? _downloadURL;

  Future<void> _pickAndUploadImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    if (pickedFile == null) return;

    setState(() {
      _image = File(pickedFile.path);
    });

    final storageRef = FirebaseStorage.instance.ref('uploads/${DateTime.now().millisecondsSinceEpoch}.png');
    await storageRef.putFile(_image!);
    final url = await storageRef.getDownloadURL();

    setState(() {
      _downloadURL = url;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Firebase Storage with Flutter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: _pickAndUploadImage,
                child: Text('Pick and Upload Image'),
              ),
              if (_image != null) Image.file(_image!, height: 150),
              if (_downloadURL != null) ...[
                SizedBox(height: 20),
                Text('Download URL:'),
                SelectableText(_downloadURL!),
              ]
            ],
          ),
        ),
      ),
    );
  }
}

Output

App UI with a button to pick and upload an image; after upload, shows the image and its download URL.

Common Pitfalls

• Not initializing Firebase before using Firebase Storage causes errors.
• Forgetting to add firebase_storage and firebase_core packages in pubspec.yaml.
• Not handling permissions for file access on devices.
• Using wrong storage paths can overwrite files unintentionally.
• Not awaiting upload tasks can cause race conditions.

dart

/// Wrong: Missing await causes upload to not finish before getting URL
final uploadTask = storageRef.putFile(file);
final url = await storageRef.getDownloadURL(); // May fail

/// Right: Await upload completion before getting URL
await storageRef.putFile(file);
final url = await storageRef.getDownloadURL();

Quick Reference

Action	Code Snippet
Get Storage Reference	FirebaseStorage.instance.ref('path/to/file')
Upload File	await ref.putFile(file)
Get Download URL	await ref.getDownloadURL()
Delete File	await ref.delete()
List Files	await ref.listAll()

Key Takeaways

Always initialize Firebase before using Firebase Storage in Flutter.

Use FirebaseStorage.instance.ref() to get a storage reference for upload or download.

Await the upload task completion before fetching the download URL.

Handle device permissions to access files before uploading.

Use unique paths to avoid overwriting files in storage.