[플러터] 8. 블로그 웹앱: 콜백 함수, 웹뷰, 네이티브 설정

사전 지식

콜백함수

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

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에서 아래와 같이 인터넷 권한을 추가합니다.

  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.example.blog_web_app">
     <uses-permission android:name="android.permission.INTERNET" />
     ...
  </manifest>
  

  다음으로 웹뷰를 사용하기 위해 버전을 변경해줍니다.
  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에서 아래와 같이 추가합니다.

  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.example.blog_web_app">
     <uses-permission android:name="android.permission.INTERNET" />
     <application 
       ...         
       android:usesCleartextTraffic="true">
       ...
     </application>
  </manifest>

  iOS

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

  <dict>
    <key>NSAppTransportSecurity</key>
      <dict>
        <key>NSAllowsLocalNetworking</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
      </dict>
   </dict>

웹뷰를 활용한 블로그 코드

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(),
    ),
  );
}

《Must Have 코드팩토리의 플러터 프로그래밍 2판》의 스터디 내용 입니다.