flender 0.0.1

A bridge for integrating Flutter with Web Native Apps.

Flender

Flender is an open-source plugin system for Flutter Web Native apps, enabling seamless communication between JavaScript and Dart. It provides a bridge for message passing, a local web server for hosting assets, and a plugin-based architecture to extend app functionality.

Features

• 📡 FlenderBridge – Enables structured messaging between WebView (JavaScript) and Flutter (Dart).
• 🌐 FlenderServer – Runs a local HTTP server to serve web assets.
• 🔌 Plugin System – Register and use plugins like DialogPlugin, PlatformPlugin, and AppStatePlugin.
• 🚀 Event Handling – Dispatch and listen to events between WebView and Flutter.

Getting Started

1️⃣ Install the Package

Add flender to your pubspec.yaml:

dependencies:
  flender: latest

2️⃣ Initialize WebView and Flender

Define a WebViewController and start the FlenderServer:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flender/flender.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final server = FlenderServer();
  await server.start(8080);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();

    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('http://localhost:8080'));

    final flenderService = FlenderBridge(_controller);
    flenderService.registerPlugin(DialogPlugin(context));
    flenderService.registerPlugin(PlatformPlugin());
    flenderService.initializeChannel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: WebViewWidget(controller: _controller));
  }
}

Usage

FlenderBridge – Communication Between WebView and Flutter

Register plugins and listen for WebView messages.

final flenderBridge = FlenderBridge(_controller);
flenderBridge.registerPlugin(MyCustomPlugin());
flenderBridge.initializeChannel();

Send an event from Flutter to WebView:

flenderBridge.sendEvent('MyPlugin', 'customEvent', {'data': 'Hello from Flutter'});

FlenderServer – Serve WebView Assets Locally

Start a simple HTTP server to serve a web app:

final server = FlenderServer(assetsDir: 'assets/www');
await server.start(8080);

Now, your WebView can load http://localhost:8080.

Plugins

Flender provides built-in plugins and supports custom plugins.

Built-in Plugins

• DialogPlugin – Show native alert, confirm, and prompt dialogs.
• PlatformPlugin – Retrieve device and platform information.
• AppStatePlugin – Listen for app lifecycle changes.

Creating Custom Plugins

To create a custom plugin, extend FlenderPlugin:

class MyCustomPlugin extends FlenderPlugin {
  @override
  String get pluginName => "MyCustomPlugin";

  @override
  Future<dynamic> onCall(String method, dynamic payload) async {
    if (method == "sayHello") {
      return "Hello, ${payload?['name'] ?? 'Guest'}!";
    }
    throw "Unknown method: $method";
  }
}

License

This project is licensed under the MIT License.