Flutter Webview

# flutter로 web화면을 디바이스로 호출하여 랜더링을 하고싶은 경우, webview라는 패키지를 사용할 수 있다.

본 글은 모바일 디바이스에서 원하는 웹사이트를 불러오는 방법에 대해서 설명하겠다.

1. Dependency 추가

> 작업폴더의 root영역을 보면 pubspec.yaml이라는 파일을 클릭한다.

 

> 버전을 명시하지 않으면 최신버전으로 설치 할 수 있다.

> 해당 코드를 작성한 뒤, 패키지를 설치하려면 상단에 Pub get이라는 버튼을 클릭하면 된다.

dependencies: webview_flutter:
webview_flutter_android:
webview_flutter_wkwebview:

 

2. package import

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

 

3. Controller 클래스 및 생성자 메소드 추가

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});
  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController_ controller;

  @override
  void initState() {
    super.initState();
    // WebView 플랫폼 종류에 따라 생성 파라미터를 다르게 설정
    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      // iOS 플랫폼일 경우, WebKitWebViewControllerCreationParams 사용
      params = WebKitWebViewControllerCreationParams(
        // 인라인 미디어 재생 허용
        allowsInlineMediaPlayback: true,
        // 사용자 제스처 없이도 미디어 재생 허용
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      // 다른 플랫폼일 경우, 기본 PlatformWebViewControllerCreationParams 사용
      params = const PlatformWebViewControllerCreationParams();
    }

    final WebViewController controller = WebViewController.fromPlatformCreationParams(params);
    // WebViewController 인스턴스 설정
    controller
      // JavaScript 모드를 무제한으로 설정
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // WebView 배경색 설정 (투명)
      ..setBackgroundColor(const Color(0x00000000))
      // 네비게이션 관련 이벤트 핸들러 설정
      ..setNavigationDelegate(
        NavigationDelegate(
          // WebView 로딩 진행률 출력
          onProgress: (int progress) {
            debugPrint('WebView is loading (progress : $progress%)');
          },
          // 페이지 로딩 시작 시 URL 출력
          onPageStarted: (String url) {
            debugPrint('Page started loading: $url');
          },
          // 페이지 로딩 완료 시 URL 출력
          onPageFinished: (String url) {
            debugPrint('Page finished loading: $url');
          },
          // 웹 리소스 에러 발생 시 에러 정보 출력
          onWebResourceError: (WebResourceError error) {
            debugPrint(
            	'''
                Page resource error:
                  code: ${error.errorCode}
                  description: ${error.description}
                  errorType: ${error.errorType}
                  isForMainFrame: ${error.isForMainFrame}
                ''');
          },
          // 네비게이션 요청 시 항상 허용
          onNavigationRequest: (NavigationRequest request) {
            debugPrint('allowing navigation to ${request.url}');
            return NavigationDecision.navigate;
          },
        ),
      )
      // 초기 URL 로드
      ..loadRequest(Uri.parse('https://flutter.dev/'));

    // Android 플랫폼일 경우 추가 설정
    if (controller.platform is AndroidWebViewController) {
      // 디버깅 모드 활성화
      AndroidWebViewController.enableDebugging(true);
      // 사용자 제스처 없이도 미디어 재생 허용
      (controller.platform as AndroidWebViewController)
          .setMediaPlaybackRequiresUserGesture(false);
    }

    _controller = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false, // 아래 여백 제거 (OS 인터페이스 방해요소)
        child: WebViewWidget(controller: _controller),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter App',
      home: WebViewPage(),
    );
  }
}

 

4. URL 기입

> ..loadRequest(Uri.parse('원하는 URL 기입'));