Flutter Web

Build and deploy Flutter apps for the web

🌐 What is Flutter Web?

Flutter Web allows you to build responsive web applications using the same Flutter codebase. Your app compiles to HTML, CSS, and JavaScript, running in modern browsers without plugins or additional installations required. 


# Build Flutter web app
flutter build web --release

# Output location
# build/web/

Output:

✓ Built build/web

Flutter Web Features

📱

Responsive Design

Flutter Web automatically adapts to different screen sizes. Use MediaQuery and LayoutBuilder to create responsive layouts that work on desktop, tablet, and mobile browsers seamlessly. 

MediaQuery.of(context).size.width
🎨

Web Renderers

Flutter Web offers two rendering engines: CanvasKit (better performance, larger size) and HTML (smaller size, wider compatibility). Choose based on your app's needs and target audience. 

flutter build web --web-renderer canvaskit
flutter build web --web-renderer html
🔗

URL Routing

Flutter Web supports browser navigation with URL routing. Users can bookmark pages, use back/forward buttons, and share links. Implement using Navigator 2.0 or packages like go_router. 

GoRouter(routes: [
  GoRoute(path: '/', builder: (context, state) => HomePage()),
]);
🚀

PWA Support

Flutter Web apps can be Progressive Web Apps (PWA), enabling offline functionality, home screen installation, and push notifications. Configure manifest.json and service worker for PWA features. 

# PWA files included by default
# web/manifest.json
# web/index.html

🔹 Enable Flutter Web

Enable web support in your Flutter project: 

# Check if web is enabled
flutter devices

# Enable web support
flutter config --enable-web

# Create web folder (if missing)
flutter create .

# Run web app
flutter run -d chrome

Output:

Chrome (web) • chrome • web-javascript • Google Chrome 120.0
Web Server (web) • web-server • web-javascript • Flutter Tools

🔹 Build for Production

Build optimized Flutter web app for deployment: 

# Build with CanvasKit renderer (better performance)
flutter build web --release --web-renderer canvaskit

# Build with HTML renderer (smaller size)
flutter build web --release --web-renderer html

# Build with auto renderer (Flutter chooses)
flutter build web --release --web-renderer auto

# Output directory
# build/web/

Build Output Files:

index.html
main.dart.js
flutter.js
assets/
icons/
manifest.json

🔹 Configure Web App

Customize your web app in web/index.html: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flutter Web App</title>
  <meta name="description" content="A Flutter web application">
  
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>
  
  <!-- PWA manifest -->
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="flutter.js" defer></script>
</body>
</html>

🔹 PWA Configuration

Configure Progressive Web App in web/manifest.json: 

{
  "name": "My Flutter App",
  "short_name": "FlutterApp",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#2196F3",
  "description": "A Flutter web application",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "icons/Icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/Icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

🔹 Deploy to Firebase Hosting

Deploy your Flutter web app to Firebase: 

# Install Firebase CLI
npm install -g firebase-tools

# Login to Firebase
firebase login

# Initialize Firebase in project
firebase init hosting

# Select build/web as public directory
# Configure as single-page app: Yes
# Set up automatic builds: No

# Deploy
firebase deploy --only hosting

Deployment URL:

✓ Deploy complete!
https://your-app.web.app

🔹 Deploy to GitHub Pages

Host your Flutter web app on GitHub Pages: 

# Build with base href
flutter build web --release --base-href "/repository-name/"

# Create gh-pages branch
git checkout -b gh-pages

# Copy build files
cp -r build/web/* .

# Commit and push
git add .
git commit -m "Deploy to GitHub Pages"
git push origin gh-pages

# Enable GitHub Pages in repository settings
# Source: gh-pages branch

🔹 Deploy to Vercel

Deploy Flutter web app to Vercel: 

# Install Vercel CLI
npm install -g vercel

# Build app
flutter build web --release

# Deploy
cd build/web
vercel --prod

# Or connect GitHub repository
# Vercel auto-deploys on push

Vercel Configuration (vercel.json): 

{
  "buildCommand": "flutter build web --release",
  "outputDirectory": "build/web",
  "framework": null
}

🔹 Web-Specific Optimizations

Optimize Flutter web app performance: 

# Enable tree shaking
flutter build web --release --tree-shake-icons

# Optimize images
# Use WebP format for images
# Compress assets before building

# Enable caching
# Configure service worker in web/index.html

# Lazy load routes
# Use deferred imports in Dart

Deferred Loading Example: 

// Import with deferred
import 'package:myapp/heavy_page.dart' deferred as heavy;

// Load when needed
Future navigateToHeavyPage() async {
  await heavy.loadLibrary();
  Navigator.push(context, MaterialPageRoute(
    builder: (context) => heavy.HeavyPage(),
  ));
}

🔹 Common Web Issues

Troubleshoot Flutter web problems:

Issue: CORS Errors

Solution: Configure server CORS headers or use proxy during development

Issue: Large Initial Load

Solution: Use HTML renderer, optimize assets, implement lazy loading

Issue: Routing Not Working

Solution: Configure server for SPA, use HashRouter, or set up redirects

Issue: Mobile Performance

Solution: Use HTML renderer for mobile, optimize images, reduce animations

🧠 Test Your Knowledge

Which renderer provides better performance for Flutter Web?