From Code to Cloud: Building a Flutter PWA and Deploying It with Firebase Hosting

What is a Progressive Web App (PWA)?

Think of a Progressive Web App (PWA) as a superhero web app. It looks like a website but behaves like a mobile app. A PWA Flutter app:

✅ Works offline
✅ Is installable like a native app
✅ Loads lightning-fast with a smooth UX

It’s basically a website that acts like a full-blown app. Best of both worlds!

Why Use Flutter for Building a PWA?

Flutter isn’t just for mobile. With Flutter’s web support, you can now:

• Use a single codebase for Android, iOS, Web, and even desktop
• Build fast and beautiful Flutter PWA apps
• Enjoy full control with custom UI widgets
• Have fun while developing (honestly, it’s that smooth)

Use command `flutter build web` to build PWA in Flutter—yep, just one command!

Why Firebase Hosting for Flutter Web?

Here’s why Firebase web hosting is a go-to for Flutter devs:

• Free Hosting: For small projects
• Global CDN:  Speedy delivery
• SSL by default
• Deploy with a single command
• Ideal for static sites like Flutter web apps

Tools You’ll Need

• Flutter SDK (with web enabled)
• Firebase CLI (npm install -g firebase-tools)
• Google account

Build a Flutter PWA Portfolio with Firebase Hosting (Step-by-Step)

Step 1: Create a Flutter Web Project

flutter create my_portfolio
cd my_portfolio

You can download sample portfolio code directly from:

https://github.com/sabinshrestha4real/my-booring-portfolio

Now that we’ve laid the groundwork, let’s move forward.

Step 2: Enable Web Support

flutter config --enable-web
flutter run -d chrome

Step 3: Build Your PWA Flutter App

flutter build web

Step 4: Set Up Firebase Hosting

Pump the brakes, Elon. Even rockets need a pre-launch checklist. Before using firebase CLI you need to create project from firebase console.

After successfully creating the project, continue with the following on your command line.

if (!firebase-tools installed) {

    npm install -g firebase-tools 
    firebase login

} else {

    firebase login

}

Step 5: Deploy Flutter Web App to Firebase Hosting

firebase deploy

Why This is Great for a Portfolio?

Still using PDFs? Here’s why a Flutter PWA portfolio hosted on Firebase is:

• Interactive animations
• Hosted globally
• Installable on mobile
• SEO-friendly
• No monthly hosting fees

Bonus: GitHub Deployment with Firebase Hosting

Want to deploy from GitHub? Firebase Hosting supports GitHub Actions!

• Link Firebase to GitHub repo during firebase init hosting
• Auto-generates CI/CD workflow
• Push to main = auto deploy

Firebase Hosting Free Tier (2025)

Here’s what you get for FREE:

• 1 GB of storage
• 10 GB/month bandwidth
• Free SSL
• Unlimited deploys
• CLI or GitHub-based CI/CD

Sample Flutter PWA Portfolio Repo

Final Thoughts

Creating a Flutter PWA and hosting it using Firebase web hosting is a powerful combo for developers. No backend? No problem. Just run `flutter build web` and `firebase deploy`, and your PWA is live.

Share Your Link, Impress Everyone!

Once deployed, share your hosted PWA like:

https://yourname.web.app

Let your work speak for itself. Goodbye PDFs, hello interactive Flutter PWA portfolio.