Features

• Display API request/response using Dio on the interface or log to the console.
• Mock response or URL when calling API.
• Display errors on the interface for easier debugging.

Installation

• Install the compatible version of the library: Type in the terminal:

flutter pub add dev_logger_ui

or add to the pubspec.yaml file in the section:

dependencies:
  flutter:
    sdk: flutter
  dev_logger_ui: latest_version

• Add interceptor to Dio:

  Dio dio = Dio();
  dio.interceptors.add(LogApiInterceptor());

• Initialization:

Initialize API log:

// create navigatorKey
GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
MaterialApp(
    navigatorKey: navigatorKey,
    //...
)

DevLoggerUI.instance.init(
      navigatorKey: navigatorKey,
      isAutoStart: true,
      isLogCurl: true,
      openTypes: [OpenType.button, OpenType.longPress, OpenType.shake],
      saveManager: SaveManager(),
      sendText: ({required body, required email, required title}) async {
        return "Email: $email\nTitle: $title\nBody: $body";
      },
      valueFromResponse: ValueFromResponse(
        checkApiSuccess: (response, {url}) {
          if (response is Map) {
            return response['status'] == true && response['code'] == 200;
          }
          return false;
        },
        getErrorCode: (response, {url}) {
          if (response is Map) {
            final errorCode = response["errorCode"];
            if (errorCode == null) return null;
            return MapEntry("errorCode", errorCode);
          }
          return null;
        },
        getErrorMessage: (response, {url}) {
          if (response is Map) {
            final message = response['message'];
            if (message == null) return null;
            return message.toString();
          }
          return null;
        },
      ),
      waitTurnOnTime: 5000,
    );

If you want to log exceptions to the interface:

runZonedGuarded(
    () {
      WidgetsFlutterBinding.ensureInitialized();
      DevLoggerUI.instance.listenFlutterError(FlutterError.onError);
      runApp(const MyApp());
    },
    (error, stack) {
      DevLoggerUI.instance.addNormalError(error, stack);
      Completer().completeError(error, stack);
    },
  );

• Main ways to open the log screen: There are 3 ways based on openType when initializing the library:

DevLoggerUI.instance.init(openTypes: [OpenType.button, OpenType.longPress, OpenType.shake]);

1. OpenType.button: Show Log button - Double click the button to open the log interface. To enable this feature, you need to add:

    MaterialApp(
        navigatorKey: navigatorKey,
        title: 'Flutter Demo',
        builder: DevLoggerUI.builder(),
        //...
    );

If you use another library that also uses builder like EasyLoading, use as below:

    MaterialApp(
        navigatorKey: navigatorKey,
        title: 'Flutter Demo',
        builder: DevLoggerUI.builder(builder: EasyLoading.init()),
        //...
    );

2. OpenType.longPress: Long press anywhere to open the log interface.
3. OpenType.shake: Shake the phone to open the log interface.