Skip to main content

Flutter Deployment

Environment Requirements​

  • Dart Version：2.4.0 and above
  • Flutter Version：1.12.0 and above

Embedding Steps​

Flutter embedding consists of two parts: native project embedding and Flutter plugin embedding.

Native Project Embedding​

Please make sure that the embedding code for the native part of the app has integrated the Tingyun SDK. If not integrated, please refer to the deployment documentation for the native project to complete the embedding.

Flutter Plugin Embedding​

Adding Dependencies​

  • Adding Dependencies

    Add the Tingyun Flutter plugin to your project's pubspec.yaml file. Currently, two deployment methods are supported: remote dependency and local dependency.

    • Remote Dependency

      dependencies:
      	tingyun_flutter_plugin: ^1.0.0

    • Local Dependency

      dependencies:
          tingyun_flutter_plugin:
              path: tingyun_flutter_plugin //Replace tingyun_flutter_plugin with the directory of your local TingYun flutter plugin

  • Get the Plugin

    After adding the dependency, run the flutter packages get command in the root directory of your project.

    Note: For iOS, add dependencies and run pod install command under the ios directory of your project.

Flutter Plugin Initialization​

  • Replace runApp()

    Comment out the original runApp() method and add the Tingyun().start(MyApp() method.

    import 'package:tingyun_flutter_plugin/tingyun_flutter_plugin.dart';

    void main() {
    	// runApp(MyApp());
        Tingyun().start(MyApp());
    }

  • Run Log

    After running the project, the console will display the following logs:

    tingyun flutter impl start
    get configure from tingyun:xxx //xxx represents the configuration of feature switches obtained from the native SDK
    //Displayed when initialization is successful
    tingyun flutter plugin success!
    //isplayed when initialization fails
    tingyun flutter plugin failed to initialize. Error: xxx //xxx represents the error description

Handling Exception Data Compatibility​

Since Flutter only allows a single handler to collect error data, Tingyun provides related parameters to be compatible with scenarios where the app collects errors itself.

  • Control Parameters

    We provide two parameters in the tingyun_flutter_plugin initialization method, and you can choose to pass related functions to handle errors.

    /**
    Due to the error capture mechanism of flutter error, two different functions need to be provided for processing,

onError is the callback function for error captured by runZoned when flutter framework does not capture exception flutterOnError is the callback function for exception captured by flutter framework through Flutter.onError.

@onError: You need to pass a function with the prototype void FunctiononError(Object, StackTrace), @flutterOnError: You need to pass a function with the prototype void FunctionFlutterError(FlutterErrorDetails details) */ Tingyun().start(MyApp(), {Function onError, Function flutterOnError});


- **Code Example**

```dart
void main() => Tingyun().start(MyApp(),onError: onCustomError, flutterOnError: onCustomFlutterError);

void onCustomError(Object object, BuildContext stackTrace){
  print('onCustomError happened');
}

void onCustomFlutterError(FlutterErrorDetails details){
  print('onCustomFlutterError happened');
}

Android WebView Data Collection​

Due to operating system differences, the Tingyun iOS SDK supports automatic collection of WebView data by default, while Android requires the following steps to add related settings. Currently, two methods are supported: automatic injection of JS probes and manual injection of JS probes.

  • Automatic Injection of JS Probes

    You need to call isHookWebChromeClient(true) when initializing the SDK, and the SDK will automatically replace the WebChromeClient and inject JS probes.

  • Example

 ```
 NBSAppAgent.setLicenseKey("Key").setRedirectHost("Host")
            .isHookWebChromeClient(true) // Automatically replace WebChromeClient and inject JS probes
            .start(getApplicationContext());
 ```

  • Manual Injection of JS Probes

    You need to call the initJSMonitor() method provided by the Tingyun Android SDK in the WebChromeClient.

  • Example

    Taking webview_flutter-0.3.24 as an example.

    1. Open the build.gradle file under the android directory of webview_flutter-0.3.24 and add the TingYun_Android_SDK dependency.

      dependencies {
          compileOnly "com.networkbench:tingyun-ea-agent-android:2.15.5"   
      }

    2. Override onProgressChanged() in WebChromeClient and add the TingYun_SDK's initJSMonitor() method.

      private class FlutterWebChromeClient extends WebChromeClient {

        @Override
        public void onProgressChanged(WebView view, int newProgress) {
          try {
            Class.forName("com.networkbench.agent.impl.instrumentation.NBSWebChromeClient");
            com.networkbench.agent.impl.instrumentation.NBSWebChromeClient.initJSMonitor(view, newProgress);
          } catch (ClassNotFoundException e) {
            e.printStackTrace();
          }
          super.onProgressChanged(view, newProgress);
        }
        ... ...
      }