# 🐦 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:

```bash
setup_flutter_web.sh
```

Paste this script:

```bash
#!/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:

```bash
chmod +x setup_flutter_web.sh
```

---

## ⚡ Step 3: Run the Script

Run this command inside your Codespace terminal:

```bash
./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:

```bash
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:

```bash
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`](http://web.sh)`"` in `.devcontainer/devcontainer.json`
    

This way, Flutter installs automatically when Codespace starts.

---

## ⚙️ Step 5: Verify Everything

You can verify your setup using:

```bash
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

| Task | Command |
| --- | --- |
| Update Flutter | `flutter upgrade` |
| Clean build | `flutter clean` |
| Build web release | `flutter build web` |
| Run with Chrome | `flutter run -d chrome --web-port=8080` |
| List devices | `flutter devices` |

---

## 🧠 Troubleshooting

### 🛠️ Error: “flutter: command not found”

You might have forgotten to export the path.  
Run:

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

### 🛠️ Error: “Permission denied”

Run the script with:

```bash
sudo ./setup_flutter_web.sh
```

### 🛠️ Error: “Web Server not found”

Run:

```bash
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)

```bash
# 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
```

---