🎮 Soulful Drive — Flutter File Upload App

A lightweight Flutter app to provide a simple, reliable mobile UI for authenticated users to pick, upload, and preview media files while handling async operations safely and showing clear feedback.

✳️ Visual Overview

Short-Soulful-Drive-1102.mp4

📹 Demo

First, see it in action:

1. Ensure Firebase / Cloudinary backends are properly configured.

> Check the .env file for CLOUDINARY backend
> Ensure you have a proper online Firebase backend

2. Run the Flutter app.

cd soulful
flutter pub get
flutter run

3. In the app

• Sign up or log in with email/password
• Tap the file picker, choose an image or video
• Upload to Cloudinary from the Upload screen
• Preview uploads via the image/video preview screens

🔍 Project Overview

Problem

• Provide a simple, reliable mobile UI for authenticated users to pick, upload, and preview media files while handling async operations safely and showing clear feedback.

Key Components

• Firebase Authentication (email/password)
• File selection using FilePicker
• Cloudinary upload service (service_cloudinary)
• Image and video preview screens (network loading, error handling, pinch/zoom, playback controls)
• Robust lifecycle handling (mounted checks, controller disposal)
• Minimal route table for quick integration

🛠️ Getting Started

1. Clone

git clone https://github.com/ex-rnd/Soulful-Drive-Upload-Using-Flutter-Cloudinary.git
cd soulful

2. Frontend setup

• Install dependencies.

flutter pub get

• Create a .env in the project root and add keys (example).

FIREBASE_API_KEY=your_firebase_api_key
FIREBASE_APP_ID=your_firebase_app_id
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name

• Configure Firebase.
• Replace lib/firebase_options.dart with the file generated by the Firebase CLI (or update the existing file to match your Firebase project).
• Ensure main.dart loads dotenv before calling Firebase.initializeApp() if you depend on env values.

3. Run the app

• Navigate to the flutter folder.

flutter run

▶️ Usage

Quick Flow.

• Sign up → Log in → Pick file → Upload → Preview

Example: pick & navigate to upload.

Upload-Soulful-Drive-1102.mp4

final result = await FilePicker.platform.pickFiles();
if (result != null) {
  Navigator.pushNamed(context, '/upload', arguments: result);
}

Example: upload handler

Upload-Soulful-Drive-1102.mp4

final success = await uploadToCloudinary(selectedFile);
if (success) {
  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Uploaded')));
  Navigator.pop(context);
}

Preview image/video

Navigator.push(context, MaterialPageRoute(builder: (_) => PreviewImage(url: uploadedUrl)));
Navigator.push(context, MaterialPageRoute(builder: (_) => PreviewVideo(videoUrl: uploadedVideoUrl)));

Flutter Front-End.

• Ensure your emulator or device is connected
• From project root:

cd frontend
flutter run

🚀 App Flow & Routes

— / Splash check (CheckUserLoggedIn) redirects to /home or /login — /home Home / main content (uploads list placeholder) — /login LoginPage (email/password) — /signup SignUpPage (name, contact, email, password) — /upload UploadArea (expects a FilePickerResult via route args)

• Preview screens: PreviewImage, Preview Video

📁 File overview (important files)

lib/main.dart

• App entry: dotenv + Firebase init, route table, CheckUserLoggedIn splash

lib/views/signup.dart

• Sign-up form: name, contact, email, password; validators, loading state, controller disposal

lib/views/login.dart

• Login form: email, password; validators, loading state, safe navigation

lib/views/upload_screen.dart

• UploadArea: shows file info; uploads via uploadToCloudinary() with loading state and error handling

lib/views/preview_image.dart

• Image preview: loadingBuilder, errorBuilder, InteractiveViewer (pinch/zoom)

lib/views/preview_video.dart

• Video preview: video_player controller init/dispose, playback controls, progress, error states

lib/services/service_firebase.dart

• AuthService: createAccountWithEmail, loginWithEmail, isLoggedIn (wrap Firebase auth)

lib/services/service_cloudinary.dart

• uploadToCloudinary(FilePickerResult) — recommended to return typed UploadResult

🔐 Environment & secret

• Never commit secrets. Use .env locally and environment injection for CI/CD.
• Required env keys (example): FIREBASE_*, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET, CLOUDINARY_CLOUD_NAME.

🔜 Next steps / improvements (roadmaP)

• ✅ Add typed AuthResult / UploadResult and refactor service returns
• ➕ Upload progress UI and resumable uploads (high priority)
• 🗂️ Persist uploads metadata and show thumbnails list on HomePage (high priority)
• 🧪 Add unit & widget tests and CI checks (medium priority)
• 🔐 Move upload signing server-side or use signed uploads for improved security (medium priority)
• 🌐 Support multiple file selection and batch uploads (future

🤝 Contributing

• Fork the repo
• Branch naming: feature/xyz or fix/xyz
• Run linters:

Frontend: flutter format

• Add tests:

Frontend widget tests with: flutter test

• Submit PRs with clear descriptions and link related issues

🙏 Thank you for exploring Flutter-Cloudinary integration 🎉!