Skip to content

README.md

Latest commit

 

History

History
289 lines (223 loc) · 10.4 KB

README.md

File metadata and controls

289 lines (223 loc) · 10.4 KB
Raw

web2flutter

Your website → native mobile app. In 60 seconds. Push notifications · Offline · Deep links · Native splash · App Store ready.


🖥️ Visual Desktop App (no terminal needed)

⚡ Or CLI (one command)

npx web2flutter https://your-website.com

🎯 The 60-second app

You have a website. Your users want an app. You don't want to rewrite everything in Swift + Kotlin.

npx web2flutter https://your-site.com

In 60 seconds you get:

  • ✅ A Flutter project ready to build for iOS AND Android
  • ✅ Splash screen + icon auto-generated from your site's favicon
  • ✅ Push notifications wired (FCM-ready)
  • ✅ Offline mode with smart caching
  • ✅ Deep links — open your app from URLs
  • ✅ Native chrome — pull-to-refresh, swipe-back, share sheet
  • ✅ App Store / Play Store ready (metadata + icons + screenshots)

⚡ Quick Start

# Just give it a URL
npx web2flutter https://shop.example.com

? App name: My Shop
? Bundle ID: com.example.shop
? Enable push notifications? Yes
? Enable offline mode? Yes
? Theme: Auto (system)

✓ Created my-shop/ (Flutter project)
✓ Configured push notifications (FCM)
✓ Generated icons for 12 platforms
✓ Set up deep links: my-shop://...

Next:
  cd my-shop
  flutter run                       # Test on simulator
  flutter build apk                 # Android
  flutter build ipa                 # iOS

🚀 What it does (technically)

  1. Crawls your site to detect:

    • Favicon, theme color, manifest.json
    • Open Graph image (for splash)
    • PWA capability (uses service worker if exists)

  2. Generates a Flutter project with:

    • WebView as the main view (webview_flutter)
    • JavaScript bridge for native ↔ web communication
    • Custom UserAgent so your site can detect it's in-app

  3. Wires native features:

    • 🔔 Push notifications via Firebase Cloud Messaging
    • 📱 Native share sheet via platform channels
    • 🖼️ Splash screen via flutter_native_splash
    • 🎯 Deep links via app_links
    • 📷 Camera access for file uploads
    • 🗺️ GPS access (with permission)
    • 💾 Offline caching with flutter_cache_manager

  4. Generates store assets:

    • All required icon sizes (12 platforms)
    • Splash screens (multiple aspect ratios)
    • Screenshot mockups (using Puppeteer)

🖥️ The Visual App (Electron)

Don't want a terminal? Download the desktop app:

┌──────────────────────────────────────────────────────────────┐
│  🚀 web2flutter Studio                              ─  ☐  ✕  │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│   ┌──────────────────────────────────────────────────────┐  │
│   │  🌐 Website URL                                       │  │
│   │  ┌────────────────────────────────────────────────┐  │  │
│   │  │ https://shop.example.com                       │  │  │
│   │  └────────────────────────────────────────────────┘  │  │
│   └──────────────────────────────────────────────────────┘  │
│                                                              │
│   App name:       [ My Shop                            ]    │
│   Bundle ID:      [ com.example.shop                   ]    │
│   Primary color:  [#8A2BE2] ⬛                              │
│                                                              │
│   Features:                                                  │
│     ☑ Push notifications     ☑ Offline mode                 │
│     ☑ Pull to refresh        ☑ Deep links                   │
│     ☑ Share button           ☐ Camera access                │
│                                                              │
│   Output:        [ /Users/you/Desktop/MyShop      ] [📁]    │
│                                                              │
│              ┌─────────────────────┐                         │
│              │   🚀 Build my app    │                         │
│              └─────────────────────┘                         │
│                                                              │
│   📦 Tip: Drag your favicon here to use as app icon          │
└──────────────────────────────────────────────────────────────┘

Features:

  • 🖱️ Point-and-click everything — no terminal required
  • 🎨 Live preview of icons, splash, and colors
  • 📦 Drag-drop favicon, logo, screenshots
  • 🚀 Build for iOS + Android in two clicks
  • 💾 Save projects, edit later, re-build with one click

🎨 Customization

After scaffold, web2flutter.config.yaml controls everything:

app:
  name: "My Shop"
  bundle_id: "com.example.shop"
  url: "https://shop.example.com"
  initial_route: "/"

theme:
  mode: auto              # light | dark | auto
  primary: "#8A2BE2"
  background: "#FFFFFF"

features:
  push_notifications: true
  offline_mode: true
  pull_to_refresh: true
  swipe_back: true        # iOS swipe-from-edge
  share_button: true
  external_links: open_in_browser   # in_app | open_in_browser

bridge:
  # JS functions your web can call from native
  expose:
    - share
    - vibrate
    - get_device_info
    - request_location

push:
  provider: fcm
  default_topic: "all-users"
  permission_prompt:
    title: "Stay updated"
    body: "Get notified about new arrivals and exclusive deals."

splash:
  background: "#FFFFFF"
  image: "assets/logo.png"
  animation: fade            # fade | slide | none
  duration_ms: 1500

store:
  apple:
    primary_category: "Shopping"
    age_rating: "4+"
  google:
    category: "SHOPPING"
    content_rating: "Everyone"

🌟 What makes web2flutter different

Feature web2flutter Capacitor PhoneGap Generic WebView
Setup time 60 sec 30+ min hours 10 min
Push notifications ✅ Built-in FCM ⚙️ Plugin needed ⚙️ Plugin needed ❌
Offline mode ✅ Smart cache ⚙️ Manual ⚙️ Manual ❌
Deep links ✅ Auto-wired ⚙️ Plugin needed ⚙️ Plugin ❌
Store assets ✅ Generated ❌ ❌ ❌
App Store / Play ✅ Metadata included ⚙️ Manual ⚙️ Manual ⚙️ Manual
RTL Arabic ✅ Detected ⚙️ Manual ⚙️ Manual ⚙️ Manual
Performance Native shell + WebView WebView WebView WebView

🇮🇶 Arabic / RTL Support

Auto-detected from your site's <html dir="rtl" lang="ar">. If detected:

  • Native splash transitions are RTL-aware
  • Share sheet uses Arabic by default
  • Pull-to-refresh hint appears in Arabic
  • Permissions prompts localized to Arabic

🛠️ Real-world use cases

  • 🛒 E-commerce sites — give your customers an app without rebuilding the storefront
  • 📰 Content sites — turn your blog/news site into a polished mobile reader
  • 🏢 SaaS dashboards — let users access your tool natively
  • 📚 Documentation sites — install your docs to home screen
  • 🎓 Learning platforms — wrap your course site as an app

📦 What's bundled

Your generated Flutter app includes:

  • webview_flutter for the main view
  • firebase_messaging for push
  • flutter_local_notifications for offline alerts
  • app_links for deep linking
  • share_plus for native share
  • connectivity_plus for offline detection
  • flutter_cache_manager for smart caching
  • flutter_native_splash for splash
  • flutter_launcher_icons for icons
  • All updated, all stable, all production-tested

🚀 Roadmap

  • Core scaffolder + WebView shell
  • FCM push notification setup
  • Offline caching layer
  • Auto icon + splash generation
  • In-app purchases (StoreKit + Play Billing)
  • Biometric auth bridge
  • Background sync API
  • Per-route native overrides (replace specific URLs with native screens)

📜 License

MIT.

Star ⭐ to give every website an app.