0128_코드팩토리 플러터 프로그래밍 cpt8

사전 지식 콜백함수 콜백함수는 일정 작업이 완료되면 실행되는 함수입니다.

WebviewController controller = WebviewController(); ..setNavigationDelegate(NavigationDelegate( onPageFinished: (String url) { print(url); } )) onPageFinished()는 웹뷰에서 페이지 로딩이 완료된 뒤에 실행되는 콜백함수 입니다. 이외에도 onWebviewCreated(), onPageStarted(), onProgress() 등 특정 조건이 성립되었을 때 실행되는 함수도 있습니다.

웹뷰 위젯 웹뷰는 프레임워크에 내장된 브라우저를 앱의 네이티브 컴포넌트에 임베딩하는 기능입니다. 즉 앱에서 웹 브라우저 기능을 구현해주는 기술입니다.

사전 준비 pubspec.yaml 웹뷰를 사용하기 위해 관련 플러그인을 설치합니다.

dependencies: flutter: sdk: flutter

webview_flutter: 4.4.1 flutter pub get 권한 및 네이티브 설정하기 웹뷰를 사용하려면 몇 가지 네이티브 설정이 필요합니다.

인터넷 사용 권한

버전 설정

(선택) http 설정

안드로이드 android/app/src/main/AndroidManifest.xml에서 아래와 같이 인터넷 권한을 추가합니다.

...

다음으로 웹뷰를 사용하기 위해 버전을 변경해줍니다. android/app/build.gradle 에서 아래와 같이 변경합니다. android/app/build.gradle은 모듈 파일이며 의존성이나 버전 정보를 관리합니다. 참고로 android/build.gradle과 andgroid/app/build.gradle은 서로 다른 파일이니 유의해줍니다.

android { compileSdkVersion 33 ..

defaultConfig { applicationId “com.example.blog_web_app” minSdkVersion 20 // webview_flutter 플로그인은 안드로이드의 최소 SDK 버전이 20 이상 필요 … } } 마지막으로 http 허용을 위해 android/app/src/main/AndroidManifest.xml에서 아래와 같이 추가합니다.

<application ... android:usesCleartextTraffic="true"> ... </application>

iOS ios/Runner/Info.plist 파일에서 http 프로토콜을 허용하는 설정을 해줍니다.

NSAppTransportSecurity NSAllowsLocalNetworking NSAllowsArbitraryLoadsInWebContent

웹뷰를 활용한 블로그 코드 lib/screen/home_screen.dart import ‘package:flutter/material.dart’; import ‘package:webview_flutter/webview_flutter.dart’;

class HomeScreen extends StatelessWidget { // 웹뷰 컨트롤러 생성 WebViewController webViewController = WebViewController() // 해당 url로 웹뷰가 로드됩니다. Uri.parse를 사용하여 입력한 url 문자열이 Uri 객체로 변환됩니다. ..loadRequest(Uri.parse(‘https://blod.codefactory.ai’)) // js 실행을 허용합니다. ..setJavaScriptMode(JavaScriptMode.unrestricted);

HomeScreen({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Code factory’), backgroundColor: Colors.orange, // 가운데 정렬 centerTitle: true,

   // AppBar에 액션 버튼을 추가할 수 있는 매개변수
   actions: [
     IconButton(
       onPressed: () {
         webViewController
             .loadRequest(Uri.parse('https://blod.codefactory.ai'));
       },
       icon: Icon(Icons.home),
     )
   ],
 ),
 body: WebViewWidget(
   controller: webViewController,
 ),

); } } lib/main.dart import ‘package:blog_web_app/screen/home_screen.dart’; import ‘package:flutter/material.dart’;

void main() { // 플러터 프레임워크가 앱을 실행할 준비가 될 때까지 기다림 WidgetsFlutterBinding.ensureInitialized();

runApp( MaterialApp( home: HomeScreen(), ), ); } profile