flutter 앱에 webView 추가 방법

안드로이드 스튜디오를 이용하여 flutter 에서 webview 추가하는 방법을 알아보겠습니다.

pubspec.yml  webview_flutter 추가

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: ^4.0.2		// 추가

 android > app > build.gradle 수정

defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.webview_in_flutter"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
        //minSdkVersion flutter.minSdkVersion		// 주석처리
        minSdkVersion 19							// 추가
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

main.dart

/*
  https://github.com/flutter/flutter/issues/117333
*/

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

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://naver.com'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

 

웹뷰 로딩시 net:ERR_CLEARTEXT_NOT_PERMITTED 오류발생시

android/app/src/main/androidmanifest.xml 파일에 
android:usesCleartextTraffic="true" 항목 추가

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webview_in_flutter">
   <application
        android:label="webview_in_flutter"
        android:name="${applicationName}"
        android:usesCleartextTraffic="true"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">

 

 

 

참고

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

https://codelabs.developers.google.com/codelabs/flutter-webview?hl=ko#3 

Flutter 앱에 WebView 추가  |  Google Codelabs

https://github.com/flutter/flutter/issues/117333

[webview_flutter] 4.0.0 Android - Could not find identifier for WebChromeClient. · Issue #117333 · flutter/flutter