Additional configuration options for the Tealeaf Flutter SDK

After you have integrated the SDK into your app, you may want to configure some additional options.

HTTP Connection Logging

HTTP connection logging is the process of recording information about requests made to a server. It helps to monitor and analyze user behavior and gain insights into application performance and issues.

The Tealeaf plugin for Flutter supports HTTP connection logging through a custom HTTP client: TlHttpClient. The TlHttpClient extends FLutter's http.BaseClient and exposes the same interface so it can be used to replace http.BaseClient.

Example usage:

import 'package:tl_flutter_plugin/tl_http_client.dart';

Future<String> fetchData() async {
    var client = TlHttpClient();
    var url = Uri.parse('https://www.google.com/');
    final response =
        await client.get(url);

    if (response.statusCode == 200) {
        // If server returns an OK response
        return  'Success';
    } else {
        // If that response was not OK
        return 'Failed to load page';
    }
}

Logging custom events

Use the following function to log custom events.

PluginTealeaf.tlApplicationCustomEvent(
   eventName: 'ButtonClicked',
   customData: {'buttonName': 'Cancel - Sample Custom Event'}
);

Here is an example from our sample app.

TextField focus change listener

The TextField focus change listener lets you detect when the user's input focus moves in and out of a Text Field component in your application.

The Tealeaf plugin for Fluter supports TextField focus change listener. To add the listener, complete the following steps:

1. Set the Key to the widget. It allows you to identify and reference the widget using the key.

   final mywidgetkey = GlobalKey();
   Container(
       key:mywidgetkey
   )
   

   Where myWidgetKey is a GlobalKey assigned to the key property of the Container widget.
2. Declare the focus node to implement on TextField. The focus node allows you to listen for focus changes and control the focus behavior of the TextField widget.

   FocusNode myfocus = FocusNode();
   

   Where myFocus is the FocusNode class, which will be used to manage the focus state of the TextField.
3. Implement the FocusNode to TextField or TextFormField:

   TextField(
       focusNode: myfocus,
   )
   

   Where: The focusNode property of the TextField widget is set to the previously declared myFocus FocusNode. This setting associates the FocusNode with the TextField, allowing you to listen for focus changes on the TextField using the FocusNode.
4. Add the focus listener to the Focusnode. It allows you to set up a focus listener to react to focus changes on the TextField associated with the FocusNode.

   myfocus.addListener(() {
       TlTextFieldListener.setupFocusListener(mywidgetkey, myfocus.hasFocus);
     }
   );
   

   Where the addListener method is called on the myFocus FocusNode.
   A callback function is triggered whenever the focus state of the FocusNode myFocus changes.
   TlTextFieldListener.setupFocusListener is called with the key of the widget (myWidgetKey) and the current focus state (myFocus.hasFocus).

Example usage:

import 'package:tl_flutter_plugin/tl_text_field_listener.dart';

final widgetKey = GlobalKey();
    FocusNode widgetFocusNode = FocusNode();

    widgetFocusNode.addListener(() {
      TlTextFieldListener.setupFocusListener(widgetKey, widgetFocusNode.hasFocus);
    });

    Form(
      key: _formKey,
      autovalidateMode: AutovalidateMode.values[_autoValidateModeIndex.value],
      child: Scrollbar(
        child: SingleChildScrollView(
          restorationId: 'text_field_demo_scroll_view',
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            children: [
              sizedBoxSpace,
              TextFormField(
                key: widgetKey,
                restorationId: 'name_field',
                focusNode: widgetFocusNode,
              ),
              sizedBoxSpace,
            ],
          ),
        ),
      ),
    );

Performance logging

Performance logging involves recording and analyzing various performance metrics. The Tealeaf plugin for Flutter facilitates logging the following performance metrics.

Example usage:

import 'package:tl_flutter_plugin/tl_flutter_plugin.dart';

PluginTealeaf.logPerformanceEvent(
            navigationType: 0,
            redirectCount: 0,
            navigationStart: 0,
            unloadEventStart: 10,
            unloadEventEnd: 20,
            redirectStart: 0,
            redirectEnd: 0,
            loadEventStart: 30,
            loadEventEnd: 40);