Supabase Storage in Flutter

Supabase Storage empowers Flutter developers to seamlessly integrate file storage capabilities into their applications. In this comprehensive blog, we’ll explore the Supabase Flutter library (version 2.0.2) and delve into the intricacies of Supabase Storage. We’ll cover uploading and downloading files, configuring and managing storage buckets, and demonstrate how to integrate file storage into Flutter applications.

Uploading and Downloading Files using Supabase Storage

1. Initializing Supabase

As usual, initialize Supabase with your project URL and API key:

import 'package:supabase_flutter/supabase_flutter.dart';

void main() {
  Supabase.initialize(
    url: 'https://your-project-id.supabase.co',
    anonKey: 'your-anonymous-key',
  );

  runApp(MyApp());
}

Replace 'https://your-project-id.supabase.co' and 'your-anonymous-key' with your Supabase project URL and anonymous key.

2. Uploading Files

Supabase provides the createObject method to upload files. Let's create a function to upload an image:

import 'dart:io';

Future<void> uploadImage(File imageFile) async {
  final response = await Supabase.storage
      .from('your-bucket-name') // Replace with your storage bucket name
      .upload('path/to/upload', imageFile);

  if (response.error == null) {
    print('Image uploaded successfully');
  } else {
    print('Upload error: ${response.error!.message}');
  }
}

Replace 'your-bucket-name' with the name of your storage bucket.

3. Downloading Files

Downloading files is just as straightforward. Let’s create a function to download an image:

Future<void> downloadImage(String filePath) async {
  final response = await Supabase.storage
      .from('your-bucket-name') // Replace with your storage bucket name
      .download('path/to/download', saveAs: filePath);

  if (response.error == null) {
    print('Image downloaded successfully');
  } else {
    print('Download error: ${response.error!.message}');
  }
}

Replace 'your-bucket-name' with the name of your storage bucket.

Configuring and Managing Storage Buckets

4. Configuring Storage Buckets

Storage buckets in Supabase act as containers for your files. You can configure and manage storage buckets through the Supabase Dashboard. Create a new bucket, set its permissions, and obtain the bucket name.

5. Managing Storage Buckets Programmatically

Supabase Flutter allows you to manage storage buckets programmatically. For example, to create a new bucket:

Future<void> createBucket(String bucketName) async {
  final response = await Supabase.storage.createBucket(bucketName);

  if (response.error == null) {
    print('Bucket created successfully');
  } else {
    print('Bucket creation error: ${response.error!.message}');
  }
}

6. Listing Files in a Bucket

To retrieve a list of files in a bucket:

Future<void> listFilesInBucket() async {
  final response = await Supabase.storage.from('your-bucket-name').list();

  if (response.error == null) {
    final files = response.data as List<Map<String, dynamic>>;
    print('Files in the bucket: $files');
  } else {
    print('Listing files error: ${response.error!.message}');
  }
}

Integrating File Storage into Flutter Applications

7. Building a Flutter Image Gallery

Let’s integrate Supabase Storage into a Flutter application by building a simple image gallery. Use the uploadImage and downloadImage functions to manage images.

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

class ImageGallery extends StatefulWidget {
  @override
  _ImageGalleryState createState() => _ImageGalleryState();
}

class _ImageGalleryState extends State<ImageGallery> {
  File? _selectedImage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Supabase Image Gallery'),
      ),
      body: Center(
        child: _selectedImage != null
            ? Image.file(_selectedImage!)
            : Text('No Image Selected'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final pickedFile =
              await ImagePicker().getImage(source: ImageSource.gallery);

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

            await uploadImage(_selectedImage!);
          }
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

This simple Flutter app allows users to select an image from the gallery, display it, and upload it to Supabase Storage.

Conclusion

In this guide, we explored the capabilities of Supabase Storage in Flutter applications. We covered uploading and downloading files using Supabase Storage, configuring and managing storage buckets both through the Supabase Dashboard and programmatically, and demonstrated how to integrate file storage into Flutter applications by building a simple image gallery.