[Flutter] Flutter에서 Webview란?

Flutter에서 WebView를 사용하면 웹 콘텐츠를 앱 내에서 표시할 수 있습니다. 이를 통해 웹 페이지를 앱 내에 삽입하거나 웹 애플리케이션을 네이티브 앱처럼 감싸서 배포할 수 있습니다. Flutter에서 WebView를 사용하는 방법과 관련된 중요한 정보와 몇 가지 코드 예제를 소개하겠습니다.

 

Flutter WebView 패키지 설치

1. Flutter에서 WebView를 사용하려면 webview_flutter 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.4  # 최신 버전 확인 필요

 

2. 패키지를 설치 명령 실행.

flutter pub get

3. 코드 작성

WebView 사용 예제

아래는 기본적인 WebView 사용 예제입니다. 이 예제에서는 WebView 위젯을 사용하여 특정 URL을 로드합니다.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: 'https://www.example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

 

 

WebView 기능 확장

1. JavaScript 사용 javascriptMode: JavascriptMode.unrestricted 설정을 통해 JavaScript를 활성화할 수 있습니다.
2. URL 변경 감지 URL이 변경될 때마다 호출되는 콜백을 설정할 수 있습니다.

onPageStarted: (String url) {
  print('Page started loading: $url');
},
onPageFinished: (String url) {
  print('Page finished loading: $url');
},

 

WebView 내비게이션 제어 WebView 내에서 특정 URL로의 네비게이션을 제어할 수 있습니다.

navigationDelegate: (NavigationRequest request) {
  if (request.url.startsWith('https://www.blockedwebsite.com')) {
    return NavigationDecision.prevent;
  }
  return NavigationDecision.navigate;
},

 

WebView에서의 상호작용

Flutter와 WebView 간의 상호작용을 위해 JavaScript와 Dart 간의 메시지를 주고받을 수 있습니다. 예를 들어, WebView에서 JavaScript를 실행하고 결과를 Flutter로 전달할 수 있습니다.

 

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Interaction Example'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              _controller.reload();
            },
          ),
        ],
      ),
      body: WebView(
        initialUrl: 'https://www.example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        onPageFinished: (String url) {
          _controller.evaluateJavascript("document.title").then((result) {
            print("Page title: $result");
          });
        },
      ),
    );
  }
}

 

 

결론

Flutter에서 WebView를 사용하면 앱 내에서 웹 콘텐츠를 쉽게 표시할 수 있습니다. webview_flutter 패키지를 통해 웹 페이지를 로드하고, JavaScript를 실행하며, 네비게이션을 제어하는 기능을 제공받을 수 있습니다. WebView는 네이티브와 웹 콘텐츠 간의 상호작용이 필요한 경우에 유용하게 사용할 수 있는 도구입니다.