[Flutter] WebView(웹뷰)를 이용한 웹페이지 연결하는 법 -webview_flutter

 

Flutter에서 webview_flutter 패키지를 활용하여 앱에 웹뷰를 연결해보려고 한다.

 

최근에 webview_flutter 라이브러리가 업데이트되어 사용법이 변경되었다.

 

이전에는 WebView() 위젯으로 웹뷰를 생성했었는데, 현재는 이 방법이 작동하지 않아 에러가 발생하는 것 같다.

 

이제는 WebView위젯이 아닌 WebViewController를 사용한다.

 

이 변화에 따라 webview_flutter 패키지를 사용하는 방법을 정리해보겠다.

 

 

 

 

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

먼저 패키지를 설치한다.

 $ flutter pub add webview_flutter

사용하고자하는 dart파일에 import 코드를 추가한다..

import 'package:webview_flutter/webview_flutter.dart';

 

사용 코드이다.

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'package:webview_flutter/webview_flutter.dart';

 

class MyWebView extends StatefulWidget {

  @override

  State<MyWebView> createState() => _MyWebViewState();

}

class _MyWebViewState extends State<MyWebView> {

 

  // WebViewController 선언

  WebViewController? _webViewController;

  void initState() {

    _webViewController = WebViewController()

      ..loadRequest(Uri.parse('https://www.youtube.com/')) //출력할 웹페이지

      ..setJavaScriptMode(JavaScriptMode.unrestricted);

    super.initState();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('WebView Ex'),

      ),

      body: WebViewWidget(controller: _webViewController!),

    );

  }

}

 

다른 화면에서 버튼을 통해 웹뷰로 연결하고싶다면 해당 이벤트를 버튼 이벤트에 넣어준다.

...

...

onPressed: () {

                    Navigator.push(

                      context,

                      MaterialPageRoute(

                        builder: (context) => MyWebView(),

                      ),

                    );

                  },

...

...