SpeedOf.Me API - Flutter Integration

This example demonstrates how to integrate the SpeedOf.Me speed test API into a Flutter app using webview_flutter.

How It Works

The SpeedOf.Me API is JavaScript-based, so Flutter apps use WebView to:

  1. Load an HTML page containing the speed test
  2. Receive results via JavaScriptChannel

Files

Prerequisites

Quick Start

1. Add Dependencies

# pubspec.yaml
dependencies:
  webview_flutter: ^4.4.2

2. Platform Setup

Android (AndroidManifest.xml):

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

iOS (Info.plist):

<key>io.flutter.embedded_views_preview</key>
<true/>

3. Configure API Credentials

SomApi.account = "YOUR_API_KEY";
SomApi.domainName = "your-domain.com";

4. Choose Loading Method

Option A: Remote URL

..loadRequest(Uri.parse('https://your-domain.com/speedtest.html'));

Option B: Flutter Asset

..loadFlutterAsset('assets/speedtest.html');

Architecture

Flutter App
   └── SpeedTestScreen (StatefulWidget)
           └── WebViewWidget (webview_flutter)
                   └── speedtest.html
                           └── SomApi.js
                                   ▼
                   window.SpeedTest.postMessage(json)
                                   ▼
                   JavaScriptChannel.onMessageReceived()

JavaScript-to-Dart Communication

The HTML page sends messages via:

window.SpeedTest.postMessage(JSON.stringify({
    type: 'completed',
    data: result
}));

Flutter receives them via JavaScriptChannel:

..addJavaScriptChannel(
  'SpeedTest',  // This becomes window.SpeedTest in JS
  onMessageReceived: (message) {
    final json = jsonDecode(message.message);
    // Handle message
  },
)

Data Models

class SpeedTestResult {
  final double download;
  final double upload;
  final double latency;
  final double jitter;
  final String? testServer;
}

State Management

For larger apps, consider:

Production Considerations

  1. API Key Security: Store keys securely (flutter_dotenv, server-side)
  2. Platform Differences: Test on both iOS and Android
  3. WebView Memory: Dispose controller properly
  4. Connectivity: Check network state before testing

Troubleshooting

Links

Back to Flutter Files All Examples API Portal