[flutter] pretty_dio_logger를 활용한 웹뷰 구현 방법

19 Dec 2023

flutter

본 포스트에서는 pretty_dio_logger를 사용하여 Flutter 앱에서 웹뷰를 구현하는 방법에 대해 알아보겠습니다.

1. pretty_dio_logger란?

pretty_dio_logger는 Dio 네트워크 클라이언트 라이브러리를 위한 로깅 도구로, 네트워크 요청 및 응답을 보기 쉬운 형식으로 로깅할 수 있도록 도와줍니다. 네트워크 요청과 응답의 세부 정보를 확인할 수 있어 디버깅 및 개발 시 유용하게 활용할 수 있습니다.

2. 웹뷰 구현

먼저, pretty_dio_logger 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0
  pretty_dio_logger: ^2.0.0
  webview_flutter: ^2.0.12

그런 다음, Dio 클라이언트를 생성하고 pretty_dio_logger를 적용합니다.

import 'package:dio/dio.dart';
import 'package:pretty_dio_logger/pretty_dio_logger.dart';

void main() {
  final dio = Dio();
  dio.interceptors.add(PrettyDioLogger(
    requestHeader: true, requestBody: true, responseBody: true, responseHeader: false,
    error: true, compact: true,
  ));
  runApp(MyApp(dio: dio));
}

이제, 웹뷰를 구현할 화면에 Webview 위젯을 추가하고 해당 URL을 로드합니다.

import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  final Dio dio;

  MyWebView({required this.dio});

  @override
  Widget build(BuildContext context) => WebView(
    initialUrl: 'https://example.com',
    debuggingEnabled: true,
    javascriptMode: JavascriptMode.unrestricted,
    onWebResourceError: (error) {
      dio.interceptors.error(error.toString());
    },
  );
}

이제 앱을 실행하고 네트워크 요청과 응답을 확인할 수 있습니다.

3. 결론

본 포스트에서는 pretty_dio_logger를 사용하여 Flutter 앱에서 웹뷰를 구현하는 방법에 대해 알아보았습니다. 이를 통해 네트워크 요청 및 응답을 보다 쉽게 확인할 수 있으며, 디버깅 및 개발 효율성을 높일 수 있습니다.

참고: pretty_dio_logger 패키지 문서

다음 포스트에서 더 많은 Flutter 및 Dio 관련 팁과 트릭을 소개하겠습니다.