[flutter] 플러터 웹뷰 3.xx -> 4.xx 변경점, webview_flutter 최신화, 코드팩토리의 플러터 프로그래밍

---

 

 

코드팩토리의 플러터 프로그래밍책을 보다가 webview_flutter package를 이용하는 게 있는데, 책에서 사용한 3.04와 현재 최신인 4.xx버전이 사용방법이 많이 달라진 것 같다. 이런 패키지가 버전이 달라진다고 사용방법이 자주 바뀌지는 않는데, 아무래도 메이저 버전이 업데이트되었으니 변경된 것 같다. 아니면 네이티브 진영(안드나 아이폰)에서 뭔가 설정이 바뀌어서 업데이트가 됐나?

 

무튼 책을 그대로 따라 하면 안 되길래 4.xx대로 webview를 써보자. 옛날 거로 쓰긴 싫으니 ㅋㅋ 

코드팩토리의 플러터 책은 강의도 그렇지만 참 설명이 짧다. 이런 거는 패키지 버전 다르면 사용법이 다를 수 있다고 명시를 좀 해줘야 할 텐데

 

 

일단 pub.dev에 가보면 현재 버전은 4.2.2가 최신이다

 

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

지금은 이게 최신인데 아마 나중에 도 업그레이드 되면서 스펙이 달라질 수 있다. 그럴 땐 최신버전에 대한 샘플코드를 보면서 또 변경해야 한다. 

 

아무튼 지금은 4.2.2인데 책에서 설명하는 3.0.4와 차이점이 있다. 

 

기존 3.0.4는 그냥 WebView라는 클래스를 사용해서 바로 웹뷰를 표기할 수 있었다. (아주 편했었는 듯?)

 

그런데 4.2.2는 WebViewController를 만들어서 넘겨줘야 실행이 되게 바뀌었다.

 

 

3.0.4

4.2.2

 

즉 기존에는 아래 코드로도 웹뷰가 떴는데, 지금은 안된다는 소리.

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


class WebViewWidget extends StatelessWidget {
  const WebViewWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: 'https://cholol.tistory.com/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

 

4.2.2 버전으로 해보자면 아래와 같다

 

import 'package:flutter/material.dart';

import 'package:webview_flutter/webview_flutter.dart';

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://google.com'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

 

됨

 

이게 어디 웹페이지를 선택하냐에 따라서 ssl연결이 잘 안 돼서 웹뷰가 로딩이 안될 수 있다. naver.com으로 했는데 안 돼서 google.com으로 바꾸니까 잘됨 ;;

 

저 컨트롤러에는 이것저것 옵션을 넣을 수 있는것 같다. 내가 만든 코드는 아주 기본적인 웹뷰만 딱 띄우는 거고 이것저것 옵션을 넣으면 앱에 있는 브라우저랑 흡사하게 사용할 수 있는 모양이다.

 

예를 들어 배경색 옵션을 주면 아래와 같이 색이 변한다.

    controller = WebViewController()
      ..setBackgroundColor(Colors.black)
      ..loadRequest(
        Uri.parse('https://google.com'),
      );

 

백그라운드 색 변경

웹뷰는 거의 화면은 다 차지하고 있으니 배경색은 좀 의미가 없는듯... ㅋㅋ 

 

navigationDelegate를 추가하면 웹뷰 내에서 페이지를 이동하는 것을 트래킹 할 수 있다.

 

controller = WebViewController()
      ..setBackgroundColor(Colors.black)
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(
        Uri.parse(url),
      )
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (request) {
            return NavigationDecision.navigate;
          },
          onUrlChange: (UrlChange change) {
            debugPrint('url change to ${change.url}');
          },
          onPageFinished: (String url) {
            debugPrint('page finished loading: $url');
          },
        )
      );

 

onNavigationRequest에서 요청한 request.url을 가지고 특정 페이지에는 링크가 되고 안되고를 정할 수 있다. return으로 NavigationDecision.navigate를 하면 허용이고, prevent를 하면 막는다. 

 

실제로 막 눌러보니 대부분의 페이지는 잘 안들어가지는데 (ssl이슈인가 에뮬레이터 이슈인가..) 구글이나 링크드인은 접속이 된다. 이동할 때마다 아래와 같이 로그가 찍힌다.

 

로그

 

앱에서 웹뷰를 띄울때 앱에서 제공하는 브라우저처럼 서핑기능을 제공하기 위해 만드는 경우는 없을 거다. 아마 특정 페이지를 띄우는 용도니까 사실 어디로 이동하는 기능은 필요 없겠지. 강제로 이동하는 거만 잘 막으면 될 것 같다.

 

웹뷰로 웹용으로 빌드된 코드를 쓴다던지, 앱 카메라 같은거 사용할 수는 있을것 같은데.. 나중에 기회되면 앱에 카메라 쪽도 한번 건들 기회가 있으면 좋겠다.