[WebView] WebView 사용법

WebView란

 

앱에서 웹브라우저 기능을 구현해 주는 Widget으로 WebView를 사용하게 되면 기존에 사용하던 웹사이트를 간단한 수정으로(CSS 수정 등) 앱에서도 사용할 수 있도록 하는 것이다. 

WebView를 사용할 경우 앱 개발을 위해 따로 인력 및 시간을 들일 필요는 장점이 존재하는 반면 

네이티브 컴포넌트에 비해 속도가 느리고 애니메이션이 부자연스럽다는 단점이 존재한다.

 

webview_flutter | Flutter package

 

WebView 사용법

 

WebView 위젯 사용 시 controller 파라미터에 WebViewController 객체를 입력하여 사용해야 한다.

// WebViewController 선언
  WebViewController webViewController = WebViewController()
  // WebViewController의 loadRequest 함수를 실행하여
  // 화면에 표시할 Uri 설정
  ..loadRequest(Uri.parse('http://naver.com'))
  // Javascript가 제한 없이 실행 되도록 설정
  ..setJavaScriptMode(JavaScriptMode.unrestricted);

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('Web View'),
        centerTitle: true,
      ),
      // WebViewWidget Widget을 사용하여 화면에 표시
      body: WebViewWidget(
        controller: webViewController,
      ),
    );
  }

 

실행 화면

 

WebView의 속성

• setJavascriptMode - 자비스크립트의 실행을 허용할지 여부를 결정하는 것으로
                                      JavaScriptMode.unrestricted(제한없이 실행)
                                      JavaScriptMode.disabled(실행불가)
• setBackgroudColor - 배경색을 지정
• loadRequest - 새로운 URL로 이동
• setNavigationDelegate - NavigationDelegate 객체를 사용하여 NavigationDelegate 에서 지원하는 콜백 함수를 사용

실제 구현 코드

 

1. WebView 사용을 위한 pubspec.yaml 파일에 플러그인 추가

 

2. 인터넷 사용을 위한 Android 및 ios 권한 추가 및 http 사용 설정

인터넷 사용 권한 설정(Android)

http 사용 설정

 

인터넷 사용 권한 설정(iso)

http 사용 설정

 

3. 화면 구성 소스

   3-1. main.dart 파일에서 lib > screen > home_screen.dart 파일 import

   3-2. HomeScreen 실행

   3-3. home_screen.dart 파일 화면 구성

   3-4. WebViewWidget 사용하여 controller에 사용할 controller 설정

   3-5. build 실행 전 WebViewController 설

import 'package:blog_web_app_1/screen/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  // 앱을 실행할 준비가 될 때까지 기다림
  WidgetsFlutterBinding.ensureInitialized();
  
  // 1. App 시작
  runApp(
    MaterialApp(
      // 2. HomeScreen 내용 불러오기
      home: HomeScreen(),
    )
  );
}

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

class HomeScreen extends StatelessWidget {

  // WebViewController 선언
  WebViewController webViewController = WebViewController()
  // WebViewController의 loadRequest 함수를 실행하여
  // 화면에 표시할 Uri 설정
  ..loadRequest(Uri.parse('http://naver.com'))
  // Javascript가 제한 없이 실행 되도록 설정
  ..setJavaScriptMode(JavaScriptMode.unrestricted);

  @override
  Widget build(BuildContext context) {
    // 3. HomeScreen 내용
    return Scaffold(
      // AppBar Widget을 사용하여 꾸미기
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('Web View'),
        centerTitle: true,
      ),
      // WebViewWidget Widget을 사용하여 화면에 표시
      body: WebViewWidget(
        controller: webViewController,
      ),
    );
  }
}

실행 화면