[Flutter] webview_flutter

플러터를 개발하다보면 웹사이트를 그대로 보여줄 필요가 있을 때가 있다.

웹 사이트를 앱에 등록해서 사용하려는 목적도 있겠지만
나는 약관 내용을 표시 한는 용도로 사용하려고 한다.

약관은 내용이 긴 경우도 있으며, 앱 내에 탑제 할 경우 스토어에 업데이트를 하지 않으면 버전 관리도 힘들어지기 때문에 개발 편의를 위해서 이용약관 등은 웹으로 구현하는게 좋아 보였다.

그래서 이번 글에서 웹뷰를 구현해 보려고한다.

webview_flutter 패키지를 사용하면 매우 쉽게 구현이 가능하다.
3.0 버전과 4.0 버전은 많은 변화가 있었기에
현재 최신버전(4.2.2)으로 기록을 남긴다.

package install

$ flutter pub add webview_flutter

Code 설명

1. url 을 Uri.parse에 넣어준다.

final homeUrl = Uri.parse('https://www.kakao.com/ko/terms');

2. _controller 에 인스턴스화 한다.

final _controller = WebViewController()
   ..setJavaScriptMode(JavaScriptMode.unrestricted)
   ..loadRequest(homeUrl);

3. body에 WebViewWidget을 생성하고 controller에 넣어준다.

body: WebViewWidget(controller: _controller),

Coding 결과

final homeUrl = Uri.parse('https://www.kakao.com/ko/terms');

class TermsScreen extends StatelessWidget {
  TermsScreen({super.key});

  final _controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(homeUrl);

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

홈으로 리셋 하는 방법(추가)

floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.loadRequest(homeUrl);
        },
        child: const Icon(
          Icons.home,
        ),
      ),

결론

공식 문서 코드에서 보면 아래와 같이 배경 색상을 변경할 수 있고,
네비게이션에 대한 설정을 할 수 있다.
사이트의 진행률 트리거,
페이지가 로드 될 때 트리거,
페이지가 종료 될 대 트리거,
페이지 에러 발생시 트리거,
시작 페이지가 youtube.com 이 아닐 경우에만 진행하도록 하는것을 진행 할 수 있다.

실제 응용 방법은 나중에 알아보자.

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  ..setNavigationDelegate(
    NavigationDelegate(
      onProgress: (int progress) {
        // Update loading bar.
      },
      onPageStarted: (String url) {},
      onPageFinished: (String url) {},
      onWebResourceError: (WebResourceError error) {},
      onNavigationRequest: (NavigationRequest request) {
        if (request.url.startsWith('https://www.youtube.com/')) {
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
    ),
  )
  ..loadRequest(Uri.parse('https://flutter.dev'));