모바일 네이티브 (native) Webview 와 Flutter 웹용 WebView > 안드로이드

목차
 

1. 네이티브 WebView (webview_flutter)

2. InAppWebView (flutter_inappwebview 패키지)

3. HtmlElementView

1. 모바일 네이티브 WebView (webview_flutter)
Android와 iOS의 네이티브 WebView를 사용하여 성능이 우수하고, 네이티브 기능과 상호작용이 가능
Flutter에서 기본적으로 지원하는 WebView로, 안드로이드와 iOS의 네이티브 WebView를 사용하여 웹 페이지를 표시하는 가장 기본적인 방법
 

특징:

안드로이드/ iOS 네이티브 WebView를 사용.

간단한 웹 페이지 로딩과 상호작용.

플러그인 방식으로 Flutter 화면 내에 웹 콘텐츠를 쉽게 삽입할 수 있음.
 

언제 사용하나요?

간단한 웹 페이지 로딩이 필요할 때.

웹 페이지 내에서 기본적인 탐색 및 상호작용을 할 때.

pubspec.yaml 

dependencies:

  webview_flutter: ^4.0.1

android/app/src/main/AndroidManifest.xml 

<uses-permission android:name="android.permission.INTERNET"/>

/lib/main.dart

import 'package:flutter/material.dart';

import 'package:webview_flutter/webview_flutter.dart';

class NativeWebViewExample extends StatefulWidget {

  @override

  _NativeWebViewExampleState createState() => _NativeWebViewExampleState();

}

class _NativeWebViewExampleState extends State<NativeWebViewExample> {

  WebViewController? _controller;

  @override

  void initState() {

    super.initState();

    // Android용 WebView 초기화 설정

    if (WebView.platform is AndroidWebView) {

      WebView.platform = SurfaceAndroidWebView();

    }

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text("Native WebView")),

      body: WebView(

        initialUrl: 'https://flutter.dev',

        onWebViewCreated: (controller) {

          _controller = controller;

        },

      ),

    );

  }

}

웹 환경 WebView (flutter_inappwebview 또는 HtmlElementView)

2. flutter_inappwebview
 

[Flutter 웹 프로젝트에서 flutter_inappwebview 을 사용]

Flutter가 웹 환경에서 실행될 때 동작하며, 기본적으로 iframe과 같은 HTML 요소를 사용하여 구현

웹에서만 사용할 수 있으며, 네이티브와의 연동이 어렵습니다

flutter_inappwebview는 더 고급 기능을 제공하는 WebView 패키지로, 네이티브 WebView보다 더 많은 기능을 사용할 수 있습니다.
 

특징:

고급 기능 제공: 파일 업로드, 다운로드, 쿠키 관리, 자바스크립트 핸들링, 페이지 로딩 이벤트 감지 등.

안드로이드/iOS 네이티브 WebView에 더 깊게 접근 가능.

JavaScript 통신 및 플러그인 통합이 매우 유연.

언제 사용하나요?

JavaScript로 웹 페이지와 상호작용해야 할 때.

파일 업로드, 다운로드와 같은 고급 기능이 필요할 때.

웹 페이지 상태 변화에 대한 세밀한 제어가 필요할 때.

HtmlElementView는 Flutter 웹에서 HTML 요소를 표시할 수 있는 방법입니다. 모바일 환경이 아니라 Flutter 웹에서만 사용할 수 있습니다. 

특징:

웹 전용 Flutter 애플리케이션에서 HTML 요소를 직접 삽입하여 사용 가능.

모바일에서는 지원되지 않음.

예를 들어, HTML로 작성된 일부 사용자 정의 요소나 웹 콘텐츠를 Flutter 웹 프로젝트 내에 표시할 수 있습니다.
 

언제 사용하나요?

Flutter 웹에서만 HTML 요소를 표시할 때.

특정 웹 콘텐츠를 직접 임베드해야 할 때.

pubspec.yaml 

dependencies:

  flutter:

    sdk: flutter

  flutter_inappwebview: ^6.0.0  

/lib/main.dart 

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter InAppWebView Example',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: WebViewExample(),

    );

  }

}

class WebViewExample extends StatefulWidget {

  @override

  _WebViewExampleState createState() => _WebViewExampleState();

}

class _WebViewExampleState extends State<WebViewExample> {

  InAppWebViewController? webViewController;

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      //appBar: AppBar(

      //  title: Text('InAppWebView Example'),

      //),

      body: InAppWebView(

        initialUrlRequest: URLRequest(

          url: WebUri.uri(Uri.parse("https://centreor.com/")),

        ),

        onWebViewCreated: (controller) {

          webViewController = controller;

        },

      ),

    );

  }

}

3. HtmlElementView

[웹 환경에서 HTML을 사용하여 WebView를 표시]

HtmlElementView는 Flutter 웹에서 HTML 요소를 표시할 수 있는 방법입니다. 모바일 환경이 아니라 Flutter 웹에서만 사용할 수 있습니다.

특징:

웹 전용 Flutter 애플리케이션에서 HTML 요소를 직접 삽입하여 사용 가능.

모바일에서는 지원되지 않음.

예를 들어, HTML로 작성된 일부 사용자 정의 요소나 웹 콘텐츠를 Flutter 웹 프로젝트 내에 표시할 수 있습니다.
 

언제 사용하나요?

Flutter 웹에서만 HTML 요소를 표시할 때.

특정 웹 콘텐츠를 직접 임베드해야 할 때.

/lib/main.dart 

import 'package:flutter/material.dart';

import 'dart:html' as html;

class WebViewHtml extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("HTML WebView"),

      ),

      body: Center(

        child: html.IFrameElement()

          ..src = 'https://flutter.dev'

          ..style.border = 'none',

      ),

    );

  }

}

[ 결론 ]

1. 네이티브 WebView (webview_flutter): 간단한 웹 페이지 로딩이 필요할 때 적합.

2. InAppWebView (flutter_inappwebview): 더 많은 제어와 기능이 필요한 상황에서 적합.

3. HtmlElementView: Flutter 웹 환경에서만 사용 가능하며, 웹 요소를 직접 보여줄 때 적합.