Learn Firebase Storage | Firebase Integration

Firebase Storage is a cloud-based solution that allows you to store and serve user-generated content such as images, videos, and other files. In Flutter apps, you commonly use Firebase Storage to enable users to upload profile pictures, share images, or download files for offline access. This service is especially useful when you want to manage files securely and reliably, as Firebase Storage automatically scales and handles large files, provides robust security through rules, and integrates seamlessly with other Firebase services like Authentication and Firestore. Typical use cases include uploading user avatars, saving chat attachments, or storing documents that need to be accessed by multiple users across devices.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
            
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';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Storage Demo',
      home: ImageUploadDownloadPage(),
    );
  }
}

class ImageUploadDownloadPage extends StatefulWidget {
  @override
  _ImageUploadDownloadPageState createState() => _ImageUploadDownloadPageState();
}

class _ImageUploadDownloadPageState extends State<ImageUploadDownloadPage> {
  File? _imageFile;
  String? _downloadUrl;
  bool _uploading = false;

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

    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });
    }
  }

  Future<void> _uploadImage() async {
    if (_imageFile == null) return;

    setState(() {
      _uploading = true;
    });

    try {
      final storageRef = FirebaseStorage.instance.ref().child('uploads/[200~${DateTime.now().millisecondsSinceEpoch}.png[201~');
      final uploadTask = storageRef.putFile(_imageFile!);

      await uploadTask.whenComplete(() => null);

      final downloadUrl = await storageRef.getDownloadURL();

      setState(() {
        _downloadUrl = downloadUrl;
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Upload failed: $e')));
    } finally {
      setState(() {
        _uploading = false;
      });
    }
  }

  Future<void> _downloadImage() async {
    if (_downloadUrl == null) return;

    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        content: Image.network(_downloadUrl!),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Storage Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            if (_imageFile != null)
              Image.file(_imageFile!, height: 150),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Select Image'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _uploading ? null : _uploadImage,
              child: _uploading ? CircularProgressIndicator() : Text('Upload Image'),
            ),
            SizedBox(height: 10),
            if (_downloadUrl != null)
              ElevatedButton(
                onPressed: _downloadImage,
                child: Text('Show Uploaded Image'),
              ),
          ],
        ),
      ),
    );
  }
}

Handling file selection, upload, and download in a Flutter app using Firebase Storage involves a few clear steps. First, you allow the user to pick an image from their device, typically using a package like image_picker. Once the user selects a file, you store it in a temporary variable. To upload the image, you create a reference in Firebase Storage with a unique path, such as by using a timestamp in the filename, and then use the putFile method to upload the image file. After a successful upload, you retrieve the file's download URL using getDownloadURL, which you can store or use to display the image later. To download and display the uploaded image, you simply use the download URL with an Image.network widget, allowing users to view the image directly from Firebase Storage. This process ensures files are managed efficiently and securely, integrating seamlessly into your Flutter app's workflow.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me a code example for uploading an image in Flutter using Firebase Storage?

What are the security best practices for using Firebase Storage in a Flutter app?

How do I handle errors during file upload or download in Flutter with Firebase Storage?

Swipe to show menu

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
            
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';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Storage Demo',
      home: ImageUploadDownloadPage(),
    );
  }
}

class ImageUploadDownloadPage extends StatefulWidget {
  @override
  _ImageUploadDownloadPageState createState() => _ImageUploadDownloadPageState();
}

class _ImageUploadDownloadPageState extends State<ImageUploadDownloadPage> {
  File? _imageFile;
  String? _downloadUrl;
  bool _uploading = false;

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

    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });
    }
  }

  Future<void> _uploadImage() async {
    if (_imageFile == null) return;

    setState(() {
      _uploading = true;
    });

    try {
      final storageRef = FirebaseStorage.instance.ref().child('uploads/[200~${DateTime.now().millisecondsSinceEpoch}.png[201~');
      final uploadTask = storageRef.putFile(_imageFile!);

      await uploadTask.whenComplete(() => null);

      final downloadUrl = await storageRef.getDownloadURL();

      setState(() {
        _downloadUrl = downloadUrl;
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Upload failed: $e')));
    } finally {
      setState(() {
        _uploading = false;
      });
    }
  }

  Future<void> _downloadImage() async {
    if (_downloadUrl == null) return;

    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        content: Image.network(_downloadUrl!),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Storage Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            if (_imageFile != null)
              Image.file(_imageFile!, height: 150),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Select Image'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _uploading ? null : _uploadImage,
              child: _uploading ? CircularProgressIndicator() : Text('Upload Image'),
            ),
            SizedBox(height: 10),
            if (_downloadUrl != null)
              ElevatedButton(
                onPressed: _downloadImage,
                child: Text('Show Uploaded Image'),
              ),
          ],
        ),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 3