flutter _ webview_flutter 를 이용해 앱에서 웹페이지 불러오기

webview_flutter 사용법

webview_flutter 는 웹페이지를 앱 형태로 보여주기위해, WebView 위젯을 제공하는 Flutter 플러그인이다.

 

 

 

 

설치방법

pubspec.yaml 파일의 dependencies 에  'webview_flutter: {버전}' 을 추가한다. Pub get 하는 거 잊지 말긔.

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  webview_flutter: ^3.0.0 <---- 입력

 

 

 

 

코드 작성 방법

home_screen.dart 파일을 만들고 아래 코드를 입력. (main에서 HomeScreen 을 호출함)

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: 'https://daco2020.tistory.com/', // 지정한 웹페이지를 앱으로 보여줌
        javascriptMode: JavascriptMode.unrestricted, // 웹페이지의 자바스크립트를 실행하려면 추가 (e.g. 유튜브 영상)
      ),
    );
  }

WebView 위젯의 initialUrl 에 웹페이지 Url을 넣는다.
javascriptMode 에는 JavascriptMode.unrestricted 을 명시한다.(unrestricted는 무제한을 뜻함)

 

javascriptMode 를 설정하는 이유는 자바스크립트를 허용하기 위함이다. 예를 들어 유튜브 영상이 포함된 웹페이지라면 자바스크립트를 허용해야 재생이 가능하다.

 

 

 

 

 

앱 실행 결과화면

 

 

 

 

 

참고하면 좋을 블로그

https://pub.dev/packages/webview_flutter

https://dev-yakuza.posstree.com/ko/flutter/webview_flutter/