반응형
250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

폴크(FOLC)

Android - InAppWebView 본문

Flutter, Android/Flutter 사용법

Android - InAppWebView

folcjin 2021. 9. 28. 23:22
728x90
반응형

# 내장된 웹 브라우저 컴포넌트로 앱을 임베딩하는 것을 말한다. 즉, 앱 내에 웹 브라우저(HTML iframe)를 넣는 것이다.
   > 웹 페이지를 보기 위해서 또는 앱 안에서 HTML을 호출하여 앱을 구현하는 하이브리드 형태로 이용된다.
   > Javasript SDK 를 사용하고 있는 웹 페이지의 경우에는 다음과 같은 형태로 임베딩이 가능하다.

1. pubspec.yaml 설정 추가
   # dependencies - flutter_inappwebview: ^5.3.2

2. /android/app/src/main/AndroidManifest.xml 옵션 설정하기
   # 메니페시트 영역 <uses-permission android:name="android.permission.INTERNET"/>
   # 안드로이드 영역 android:usesCleartextTraffic="true">

3. /android/app/src/build.gradle 설정 변경
   # minSDKVersion 16 -> 28 로 변경

4. 소스 코드 변경하기
   # 자동 생성되는 내용에서 Widget build(BuildContext context) 부분을 모두 제거하고 아래와 같이 입력
   # url 부분에 원하는 web page address 를 기록하면 된다.

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebViewGroupOptions option InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(javaScriptEnabled:true, javaScriptCanOpenWindowsAutomatically: true,
useShouldOverrideUrlLoading: true,
useShouldInterceptFetchRequest: true,),
android: AndroidInAppWebViewOptions(useHybridComposition: true,
mixedContentMode: AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW,
supportMultipleWindows : true,
useShouldInterceptRequest:true)
);

Widget build(BuildContext context) {
   return Scaffold(body: Builder(builder: (BuildContext context){
      return InAppWebView(initialUrlRequest: URLRequest(url: Uri.parse("https://127.0.0.1/")),
         initialOptions: option,
         onWebViewCreated: onWebViewNewCreated,

         onCreateWindow:onCreateNewWindow);
      }));
}

728x90
반응형
사업자 정보 표시
사업자 등록번호 : -- | TEL : --