[Flutter] WebView로 앱 내에 웹사이트 출력

플러터 WebView를 이용하여 앱 내에 웹사이트를 표출할 수 있다.

 

1. WebView 관련 패키지 의존성 추가

dependencies:
  webview_flutter:
  webview_flutter_android:
  webview_flutter_wkwebview:

• pubspec.yaml에 입력하고 flutter pub get 실행

 

2. 해당 패키지 임포트

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. Android 최소 SDK 버전 설정

android {
        defaultConfig {
            minSdkVersion 19
        }
    }

• WebView 패키지는 안드로이드 SDK의 버전 19 이상부터 지원을 하기 때문에 설정을 해주기 위해 build.gradle 파일에서 작성한다.

 

4. WebView 컨트롤러 변수 선언

class _TrainingInState extends State<TrainingIn> {
  late final WebViewController _controller;

• 웹뷰를 구현할 위젯에서 컨트롤러 State를 추가한다.

 

5. WebView 컨트롤러 초기 설정 코드 작성

@override
  void initState() {
    super.initState();
 
    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }
 
    final WebViewController controller =
        WebViewController.fromPlatformCreationParams(params);
 
    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            debugPrint('WebView is loading (progress : $progress%)');
          },
          onPageStarted: (String url) {
            debugPrint('Page started loading: $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;
          },
        ),
      )
      ..addJavaScriptChannel(
        'Toaster',
        onMessageReceived: (JavaScriptMessage message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        },
      )
      ..loadRequest(Uri.parse('10.0.2.2:5000/cameraPage'));
 
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewController.enableDebugging(true);
      (controller.platform as AndroidWebViewController)
          .setMediaPlaybackRequiresUserGesture(false);
    }
 
    _controller = controller;
  }

• 웹뷰를 활용하기 위해 앞서 선언한 WebViewController를 이용하여 초기 설정을 진행한다.
• ..loadRequest(Uri.parse('<https://flutter.dev/>')); 해당 코드로 앱 내에 출력하기 원하는 웹사이트 주소를 입력한다.

 

6. 설정된 컨트롤러를 이용하여 앱 내에 최종 표출

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: _controller),
		)
	}

• 최종적으로 웹사이트를 앱에 넣기 위해서 웹뷰를 구현할 위젯에 WebViewWidget 위젯을 사용한다. 앞서 설정한 컨트롤러 변수를 파라미터도 같이 넣어준다.