Flutter InAppWebView ERR

net::ERR_UNKNOWN_URL_SCHEME 오류는 InAppWebView에서 특정 URL 스키마(예: intent://, market://, tel:// 등)를 처리할 수 없을 때 발생합니다.

이 문제를 해결하려면 shouldOverrideUrlLoading 콜백을 사용하여 특정 URL 스키마를 직접 처리해야 합니다.

🔹 해결 방법: shouldOverrideUrlLoading 사용

아래와 같이 shouldOverrideUrlLoading을 오버라이드하여 특정 URL 스키마를 처리할 수 있습니다.

📌 예제 코드

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
InAppWebViewController? webViewController;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("InAppWebView Example")),
body: InAppWebView(
initialUrlRequest: URLRequest(url: WebUri("https://example.com")),
onWebViewCreated: (controller) {
webViewController = controller;
},
shouldOverrideUrlLoading: (controller, navigationAction) async {
var uri = navigationAction.request.url;
if (uri != null && uri.scheme != "http" && uri.scheme != "https") {
try {
if (await canLaunchUrl(uri)) {
await launchUrl(uri);
return NavigationActionPolicy.CANCEL;
}
} catch (e) {
print("Could not launch $uri: $e");
}
}
return NavigationActionPolicy.ALLOW;
},
),
),
);
}
}
import 'package:flutter/material.dart'; import 'package:flutter_inappwebview/flutter_inappwebview.dart'; import 'package:url_launcher/url_launcher.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => new _MyAppState(); } class _MyAppState extends State<MyApp> { InAppWebViewController? webViewController; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("InAppWebView Example")), body: InAppWebView( initialUrlRequest: URLRequest(url: WebUri("https://example.com")), onWebViewCreated: (controller) { webViewController = controller; }, shouldOverrideUrlLoading: (controller, navigationAction) async { var uri = navigationAction.request.url; if (uri != null && uri.scheme != "http" && uri.scheme != "https") { try { if (await canLaunchUrl(uri)) { await launchUrl(uri); return NavigationActionPolicy.CANCEL; } } catch (e) { print("Could not launch $uri: $e"); } } return NavigationActionPolicy.ALLOW; }, ), ), ); } }
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("InAppWebView Example")),
        body: InAppWebView(
          initialUrlRequest: URLRequest(url: WebUri("https://example.com")),
          onWebViewCreated: (controller) {
            webViewController = controller;
          },
          shouldOverrideUrlLoading: (controller, navigationAction) async {
            var uri = navigationAction.request.url;

            if (uri != null && uri.scheme != "http" && uri.scheme != "https") {
              try {
                if (await canLaunchUrl(uri)) {
                  await launchUrl(uri);
                  return NavigationActionPolicy.CANCEL;
                }
              } catch (e) {
                print("Could not launch $uri: $e");
              }
            }

            return NavigationActionPolicy.ALLOW;
          },
        ),
      ),
    );
  }
}

🔹 설명

  1. shouldOverrideUrlLoading에서 URL을 확인합니다.
  2. URL 스키마가 http, https가 아니면 url_launcher 패키지를 사용하여 외부 앱에서 실행합니다.
  3. 정상적으로 실행되었다면 NavigationActionPolicy.CANCEL을 반환하여 웹뷰에서 처리하지 않도록 합니다.
  4. http, https 스키마는 그대로 웹뷰에서 처리하도록 NavigationActionPolicy.ALLOW을 반환합니다.

🔹 url_launcher 패키지 추가 방법

pubspec.yaml 파일에 추가:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dependencies:
flutter:
sdk: flutter
flutter_inappwebview: ^6.0.0
url_launcher: ^6.0.9
dependencies: flutter: sdk: flutter flutter_inappwebview: ^6.0.0 url_launcher: ^6.0.9
dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^6.0.0
  url_launcher: ^6.0.9

flutter pub get 실행하여 패키지를 설치하세요.

Leave a Reply

Your email address will not be published. Required fields are marked *