Skip to Content
DocsAdd WebF To FlutterOverview

Add WebF to Flutter

This guide is for Flutter developers who want to integrate WebF into their existing Flutter applications to leverage web technologies, reuse WebF app code, or create powerful hybrid user interfaces.

What is WebF?

WebF is a high-performance web rendering engine built on Flutter that enables you to build native Flutter apps using web technologies (HTML, CSS, and JavaScript). Unlike traditional webviews, WebF directly renders WebF app content using Flutter’s rendering pipeline, providing native-like performance and seamless integration with Flutter widgets.

What is a WebF App?

A WebF app consists of two complementary parts:

  1. Web Standards Layer: Standard HTML, CSS, and JavaScript code that’s compatible with web standards

    • Works with popular frameworks like React, Vue, and vanilla JS
    • Uses familiar DOM APIs, CSS styling, and JavaScript features
    • Portable and can run in browsers with minimal modifications

  2. Flutter Integration Layer: Custom APIs, components, and services exposed from Flutter

    • Custom Elements: Flutter widgets accessible as HTML elements (e.g., <flutter-button>)
    • Native Modules: Dart/Flutter APIs callable from JavaScript (e.g., camera, storage, sensors)
    • Platform Features: Access to device capabilities through Flutter plugins

This hybrid architecture lets you leverage both the web ecosystem and Flutter’s native capabilities in a single WebF application.

Key Characteristics

  • Not a browser: WebF builds Flutter apps, not WebF apps running in browsers
  • Native rendering: Uses Flutter’s rendering engine, not browser rendering
  • JavaScript runtime: Powered by QuickJS for efficient JS execution
  • Web standards support: Implements core DOM/CSS APIs with C++ and Dart
  • Hybrid UI: Mix Flutter widgets and WebF app content seamlessly

Why Integrate WebF into a Flutter App?

WebF unlocks powerful capabilities for Flutter developers:

  1. Leverage Web Ecosystem: Use popular web frameworks like React, Vue, and their vast ecosystem of libraries
  2. Code Reuse: Share code and components between web and mobile without maintaining separate codebases
  3. Hot Updates: Update UI and logic over-the-air without app store approvals (within platform guidelines)
  4. Rapid Prototyping: Build complex UIs faster using familiar web technologies
  5. Hybrid Teams: Enable web developers to contribute to mobile apps
  6. Dynamic Content: Load and render dynamic WebF app content safely
  7. Cross-Platform UI: Write once in React/Vue, run on iOS, Android, macOS, Linux, and Windows

Use Cases

  • Building feature-rich apps with frequent updates
  • Creating content-driven WebF applications (news, blogs, e-commerce)
  • Integrating WebF app-based admin panels or dashboards
  • Developing apps with complex, dynamic layouts
  • Sharing business logic between web and mobile platforms

Getting Started

This guide is organized into several sections to help you integrate WebF into your Flutter application:

Integration Guide

  1. Getting Started - Install WebF and create your first instance
  2. Core Concepts - Understand WebF widgets, controllers, and lifecycle
  3. Embedding WebF - Integrate WebF into your widget tree
  4. Hybrid UI - Create custom Flutter widgets for WebF
  5. Build Native Plugins - Expose Flutter plugins to JavaScript
  6. Hybrid Routing - Set up navigation between Flutter and WebF
  7. Advanced Topics - Performance monitoring, theming, and caching

Deployment

Once you have integrated WebF into your Flutter app, deploy it like any standard Flutter app:

  • Deployment Guide - Deploy your WebF Flutter app to app stores and manage WebF app content updates

Quick Example

Here’s a minimal example to get you started:

import 'package:flutter/material.dart';
import 'package:webf/webf.dart';
 
void main() {
  // Initialize WebF controller manager
  WebFControllerManager.instance.initialize(
    WebFControllerManagerConfig(
      maxAliveInstances: 5,
      maxAttachedInstances: 3,
    ),
  );
 
  // Pre-render a WebF app
  WebFControllerManager.instance.addWithPrerendering(
    name: 'home',
    createController: () => WebFController(),
    bundle: WebFBundle.fromUrl('https://example.com/'),
  );
 
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: WebF.fromControllerName(
          controllerName: 'home',
          loadingWidget: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

Prerequisites

Before integrating WebF, ensure you have:

  • Flutter SDK (latest stable version recommended)
  • Basic understanding of Flutter widgets and state management
  • (Optional) Familiarity with web technologies (HTML, CSS, JavaScript)
  • (Optional) Experience with React or Vue for building WebF apps

Next Steps

Start with the Getting Started guide to install WebF and create your first instance.

Additional Resources

Contributing

WebF is open source! Contributions are welcome:

AccessibilityGetting Started