Getting Started

The GOFA WebView SDK enables seamless integration of GOFA's web-based fitness experiences into your Flutter application. This SDK provides a secure, authenticated WebView component that allows users to access GOFA's web platform features directly within your mobile app.

Key Features

• Secure Authentication: Built-in client credential management and secure token handling
• Basic Auth Support: Configurable basic authentication for secure web content access
• Environment-Aware: Support for different environments (DEV, UAT, PRD)
• Ready-to-Use Widget: Pre-built GofaWebView widget that handles authentication and navigation

Installation

Add the Package

onepub pub add gofa_webview
flutter pub add get_it

Import Required Packages

import 'package:gofa_webview/gofa_webview.dart';
import 'package:get_it/get_it.dart';

Basic Setup

1. Configure Environment Variables

Set up your credentials and environment:

# During Flutter build
flutter build apk --dart-define=GOFA_CLIENT_ID=your-client-id \
                  --dart-define=GOFA_CLIENT_SECRET=your-client-secret \
                  --dart-define=GOFA_CLIENT_USER_ID=unique-user-id \
                  --dart-define=GOFA_ENVIRONMENT=UAT

2. Initialize the SDK

Future<void> registerWebViewSdk({
  required BuildContext context,
}) async {
  if (!GetIt.I.isRegistered<WebViewSdkManager>()) {
    final webViewSdkManager = WebViewSdkManager(
      environment: const String.fromEnvironment('GOFA_ENVIRONMENT', defaultValue: 'DEV'),
      basicAuthUser: 'gofa',
      basicAuthPass: 'your-basic-auth-password',
    );
    GetIt.I.registerSingleton<WebViewSdkManager>(webViewSdkManager);
  }

  final webViewSdkManager = GetIt.I<WebViewSdkManager>();

  if (!webViewSdkManager.isInitialized) {
    webViewSdkManager.init(
      clientId: const String.fromEnvironment('GOFA_CLIENT_ID', defaultValue: 'abc'),
      clientSecret: const String.fromEnvironment('GOFA_CLIENT_SECRET', defaultValue: 'abcSecret'),
      clientUserId: const String.fromEnvironment('GOFA_CLIENT_USER_ID', defaultValue: 'default_user'),
      environment: const String.fromEnvironment('GOFA_ENVIRONMENT', defaultValue: 'DEV'),
      basicAuthUser: 'gofa',
      basicAuthPass: 'your-basic-auth-password',
    );
  }
}

3. Configure Routes

Add the WebView route to your app:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        GofaWebView.routeName: (context) {
          final arguments = ModalRoute.of(context)?.settings.arguments;
          final argumentMap = arguments as Map;
          return GofaWebView(
            url: argumentMap['url'] as String,
            clientId: argumentMap['clientId'] as String,
            locale: argumentMap['locale'] as Locale?,
          );
        },
      },
      home: const MyHomePage(),
    );
  }
}

GofaWebView Widget

Constructor Parameters

The GofaWebView widget accepts the following parameters:

Parameter	Type	Required	Description
url	String	✅	The GOFA web application URL to load
clientId	String	✅	Your application's client identifier
locale	Locale?	❌	Optional locale for internationalization

Usage Example

GofaWebView(
  url: 'https://bupa-uat.uat.gofa.app/msk/home',
  clientId: 'your-client-id',
  locale: const Locale.fromSubtags(
    languageCode: 'zh',
    scriptCode: 'Hant',
  ),
)

Locale Configuration

The locale parameter allows you to specify the language and region for the WebView content:

Common Locale Examples

// English (default)
const Locale('en')

// Traditional Chinese (Hong Kong)
const Locale.fromSubtags(
  languageCode: 'zh',
  scriptCode: 'Hant',
)

// Simplified Chinese (China)
const Locale.fromSubtags(
  languageCode: 'zh',
  scriptCode: 'Hans',
)

tip

If no locale is specified, the WebView will use the system's default locale or English as fallback.

4. Navigate to WebView

info

For the WebView URL, please contact our GOFA support team to get the correct URL for your environment.

ElevatedButton(
  onPressed: () async {
    await registerWebViewSdk(context: context);

    if (context.mounted) {
      await Navigator.pushNamed(
        context,
        GofaWebView.routeName,
        arguments: {
          'url': 'https://bupa-uat.uat.gofa.app/msk/home',
          'clientId': const String.fromEnvironment('GOFA_CLIENT_ID', defaultValue: 'abc'),
          'locale': const Locale.fromSubtags(
            languageCode: 'zh',
            scriptCode: 'Hant',
          ),
        },
      );
    }
  },
  child: const Text('Open GOFA WebView'),
),

Environment Configuration

Environment	Purpose	URL Pattern
UAT	User Acceptance Testing	*.uat.gofa.app
PRD	Production	*.gofa.app

Authentication

The SDK uses OAuth 2.0 client credentials flow with optional basic authentication:

• clientId: Your application's unique identifier
• clientSecret: Confidential key for authentication
• clientUserId: Unique identifier for the user
• basicAuthUser/basicAuthPass: Additional HTTP basic auth (if required)

Security

Always use environment variables for credentials. Never hardcode sensitive information in your source code.

Additional Resources

• Advanced Configuration: Environment and callback configuration
• SDK Reference: Complete API documentation
• SDK Versions: Changelog and version history