dev_logger_ui 1.0.0-dev.4

Display API requests, responses, errors, and mocked APIs(response/url) in the UI. Log all of them to the console, and also display exceptions in the UI.

Tính năng

• Hiển thị các request/response api dùng Dio lên giao diện hoặc log ra console.
• Mock response hoặc url khi gọi api.
• Hiển thị các lỗi lên giao diện để tiện debug.

Cài đặt

• Cài đặt bản tương thích của thư viện: Gõ vào termial:

flutter pub add dev_logger_ui

hoặc thêm vào file pubspec.yaml trong đoạn:

dependencies:
  flutter:
    sdk: flutter
  dev_logger_ui: latest_version

• Thêm interceptor vào Dio:

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

• Khởi tạo:

Khởi tạo log API:

//tạo 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,
    );

Nếu muốn log các exception lên giao diện:

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

• Các cách mở màn hình log chính: Có 3 cách dựa vào openType khi khởi tạo lib:

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

1. OpenType.button: Hiện button Log - Click 2 lần vào button để mở giao diện log. Để mở chức năng này bạn cần thêm:

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

Nếu bạn dùng 1 lib khác có dùng builder như EasyLoading thì dùng như dưới đây:

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

2. OpenType.longPress: Bấm giữ vào 1 vị trí bất kỳ để mở giao diện log.
3. OpenType.shake: Lắc điện thoại để mở giao diện log.