🐦 How to Set Up Flutter Web in GitHub Codespaces (Step-by-Step Guide)

If you’ve ever wanted to build and test your Flutter Web app directly in the cloud, without installing anything locally — GitHub Codespaces is your best friend.

Codespaces gives you a full VS Code + Ubuntu dev environment inside your browser.
With a few simple commands, you can run Flutter Web live inside Codespaces, preview your app instantly, and even share it with others.

In this guide, we’ll cover:

• ✅ How to install Flutter in GitHub Codespaces

• ⚙️ How to enable Flutter Web

• 🌐 How to run your Flutter app in the browser

• 🧰 Common issues and their fixes

• 💡 Pro tips for developers

By the end, your Flutter web app will be running live in Codespaces with hot reload — no emulator, no setup pain.

---

🧱 Step 1: Create a New GitHub Codespace

1. Go to your Flutter project’s GitHub repo.

2. Click the “Code” → “Create codespace on main” button.

3. Wait for it to open — you’ll now be inside a Linux + VS Code dev environment.

Once your terminal is ready, we’ll install Flutter.

---

🧰 Step 2: Create the Flutter Setup Script

Inside your Codespace, create a file named:

setup_flutter_web.sh

Paste this script:

#!/usr/bin/env bash
# setup_flutter_web.sh — Setup Flutter Web in GitHub Codespaces
set -euo pipefail

PROJECT_DIR="${1:-.}"
FLUTTER_INSTALL_DIR="/usr/local/flutter"
FLUTTER_CHANNEL="stable"
WEB_PORT=8080
WEB_HOST="0.0.0.0"

echo "=== Installing dependencies ==="
sudo apt-get update -y
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa openjdk-17-jdk ca-certificates

echo "=== Cloning Flutter SDK (stable channel) ==="
if [ ! -d "$FLUTTER_INSTALL_DIR" ]; then
  sudo git clone https://github.com/flutter/flutter.git -b $FLUTTER_CHANNEL $FLUTTER_INSTALL_DIR
else
  echo "Flutter already installed at $FLUTTER_INSTALL_DIR"
fi

echo "=== Adding Flutter to PATH ==="
export PATH="$PATH:$FLUTTER_INSTALL_DIR/bin"

echo "=== Checking Flutter doctor ==="
flutter doctor -v || true

echo "=== Enabling Flutter Web ==="
flutter config --enable-web

echo "=== Running flutter pub get ==="
cd "$PROJECT_DIR"
flutter pub get

echo "✅ Setup complete!"
echo ""
echo "Run your app with:"
echo "flutter run -d web-server --web-hostname=0.0.0.0 --web-port=8080"

Now make it executable:

chmod +x setup_flutter_web.sh

---

⚡ Step 3: Run the Script

Run this command inside your Codespace terminal:

./setup_flutter_web.sh

This will:

• Install Flutter SDK

• Add it to your PATH

• Enable Flutter Web support

• Run flutter pub get

• Print the final “run” command

---

🌐 Step 4: Run Flutter Web

Once setup is done, start your web server:

flutter run -d web-server --web-hostname=0.0.0.0 --web-port=8080

Now open the Ports tab in GitHub Codespaces —
You’ll see 8080 listed → click “Open in Browser” 🚀

Boom 💥 — your Flutter app is running live in the browser!

---

💬 Common Questions (and Answers)

❓ Q1: Can I run Android emulator in Codespaces?

No.
GitHub Codespaces doesn’t support GUI or virtualization.
You can only use Flutter Web or connect to a remote device.

For most UI development, Flutter Web is perfect.

---

❓ Q2: Why do I see warnings in flutter doctor?

Some warnings (like Android SDK missing) are safe to ignore when working with Flutter Web.
As long as “Chrome” or “Web Server” shows in flutter devices, you’re good.

---

❓ Q3: My changes don’t reflect instantly — what about hot reload?

Hot reload works perfectly when using:

flutter run -d web-server

Simply hit “r” in terminal or click the 🔁 button in VS Code.

---

❓ Q4: How do I make Flutter available automatically next time?

Codespaces environments reset on rebuild.
To make Flutter persistent:

1. Add the script inside .devcontainer/

2. Add "postCreateCommand": "./setup_flutter_web.sh" in .devcontainer/devcontainer.json

This way, Flutter installs automatically when Codespace starts.

---

⚙️ Step 5: Verify Everything

You can verify your setup using:

flutter doctor -v
flutter devices
flutter --version

You should see:

• ✅ Flutter version (stable)

• ✅ Web Server / Chrome device

• ✅ No critical issues

---

💡 Bonus Tips for Flutter Web in Codespaces

---

🧠 Troubleshooting

🛠️ Error: “flutter: command not found”

You might have forgotten to export the path.
Run:

export PATH="$PATH:/usr/local/flutter/bin"

🛠️ Error: “Permission denied”

Run the script with:

sudo ./setup_flutter_web.sh

🛠️ Error: “Web Server not found”

Run:

flutter config --enable-web
flutter devices

---

🏁 Conclusion

You’ve just learned how to set up Flutter Web inside GitHub Codespaces —
no local SDK, no emulator, no setup headaches.

This setup is perfect for:

• Solo developers building Flutter Web apps

• Teams collaborating remotely

• CI/CD or quick demos of UI prototypes

Once you get this running, Codespaces becomes your cloud Flutter dev machine — accessible from anywhere.

---

✨ TL;DR (Copy-Paste Setup)

# Step 1: Create Codespace
# Step 2: Run setup script
bash <(curl -sSL https://gist.githubusercontent.com/Ajinkgupta/dd45476b5de754b6ed3a9ddba9edb33f/raw/70e8ef759097805d391b8af409caa7f8ce3a6dfa/setup.sh)

# Step 3: Run Flutter Web
flutter run -d web-server --web-hostname=0.0.0.0 --web-port=8080

---