Embedding in an Existing Flutter App

Embed EasyCord inside an existing Flutter application.

Introduction

EasyCord provides a WebView widget that embeds directly into your Flutter widget tree. This lets you build specific screens using web technology without migrating the entire application.

Prerequisites

• An existing Flutter project.
• Basic knowledge of Flutter widgets.

Step 1: Add the Dependency

Add the EasyCord Flutter package to your project dependencies.

flutter pub add easycord

Step 2: Create Permissions Allowlist

Create a file named easycord_permissions.yaml in the root of your Flutter project. This acts as the capability allowlist for the WebView.

permissions:
  - "getUserToken"
  - "triggerNativePayment"

Step 3: Initialize EasyCord in Dart

Register your bridge handlers before running the application. Open lib/main.dart and add the registration logic.

import 'package:flutter/material.dart';
import 'package:easycord/easycord.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  EasyCordBridge.register('getUserToken', (payload) async {
    return { 'token': 'secure_token_from_secure_storage' };
  });

  EasyCordBridge.register('triggerNativePayment', (payload) async {
    final amount = payload['amount'];
    return { 'success': true };
  });

  runApp(const MyApp());
}

Step 4: Embed the Widget

Embed the EasyCordWidget inside your Flutter widget tree. Point it to a local folder of assets or a hosted web URL.

import 'package:flutter/material.dart';
import 'package:easycord/easycord.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dashboard')),
      body: const EasyCordWidget(
        initialUrl: 'assets/web/index.html',
        enableZoom: false,
      ),
    );
  }
}

[!IMPORTANT] If you are using EasyCord as the root of your app, ensure you pass navigatorKey: easyCord.navigatorKey to your MaterialApp. This is required for Native Dialogs and Overlays to function correctly.

Step 5: Android Configuration

EasyCord uses a local loopback server to serve web assets. For this to work in Release mode on Android, you must add the INTERNET permission to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

Additionally, if you plan to use the easycord_biometrics plugin, ensure your MainActivity.kt extends FlutterFragmentActivity instead of FlutterActivity.

Verification

Run your Flutter application. Navigate to the screen containing WebDashboardScreen. The web content displays inside the Flutter view.

Troubleshooting

Missing Assets

Occurs when local assets fail to load. Check your pubspec.yaml to ensure the assets directory is included.

flutter:
  assets:
    - assets/web/
    - assets/web/assets/

Next Steps

• Bundling a Local Web App
• Writing Custom Flutter Plugins