Flutter로 WebView 만들어보기

0️⃣ WebView?

어플리케이션을 쓰다보면 앱 내에서 웹페이지가 동작 할 때가 있다. 예를 들어, 네이버나 유튜브 화면을 띄울 필요가 있을 때 말이다.

 Flutter 내부에서도 그렇게 웹 페이지를 띄울 수가 있는데, 이때 사용하는 라이브러리가 바로 webview_flutter 이다.

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter package

 

1️⃣ webview_flutter 설치

 $flutter pub add webview_flutter

명령어를 통해 webview_flutter를 설치한다.

내가 사용한 버전은 위와 같다.

2️⃣ 사용방법

webview_flutter docs에 사용방법이 매우 상세하게 잘 나와있어 해당 Readme를 보며 작업해도 크게 무리 없이 작업할 수 있다.

우선, Stateful Widget에 initState() 함수 내에서 작업하면 된다. (Readme에 쓰여진 initState() 함수를 그대로 사용하면 되고, 필요에 따라 로딩이나 에러처리를 할 수 있다.)

import 'dart:convert';

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

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

  @override
  State<WebviewScreen> createState() => _WebviewScreenState();
}

class _WebviewScreenState extends State<WebviewScreen> {
  WebViewController? controller;

  @override
  void initState(){
    super.initState();

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

    ..loadRequest(Uri.parse(
      "https://www.naver.com/"
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(
        controller: controller!
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: CommonColor.primary,
        child: const Icon(Icons.exit_to_app_sharp),
        onPressed: (){Get.back();},
      ),
    );
  }
}