[코드팩토리의 플러터 프로그래밍] 8장. 블로그 웹앱 : 콜백함수, 웹뷰, 네이티브 설정 - 프로젝트 설정, 권한 설정

환경 : mac m1

1. 사전지식

1) 콜백함수 : 일정 작업이 완료되면 실행되는 함수 

- onPageFinished .. 등등이 있음 

WebViewController controller = WebViewController()
  ..setNavigationDelegate(NavigationDelegate(
    // 로딩 완료 후 실행되는 함수 
    onPageFinished : (String url) {
      print(url);
    }
  ))

 

NavigationDelegate class - webview_flutter library - Dart API (pub.dev)

NavigationDelegate class - webview_flutter library - Dart API

 

2) 웹뷰 위젯 

- 웹뷰 : 프레임워크에 내장된 브라우저를 앱의 네이티브 컴포넌트에 임베딩하는 기능 

ㄴ 네이티브 컴포넌트에 비해 속도가 느리고 애니메이션이 부자연스럽지만, 웹뷰 사용할 경우 코드 몇줄로 기존 웹사이트를 활용할 수 있음 

속성	설명
setJavascriptMode	웹뷰에서 자바스크립트 실행을 허용할지 여부 결정  - javascriptmode.unrestricted : 제한없이 실행  - javascriptmode.disabled : 실행할 수 없음
setBackgroundColor	배경색 지정 가능
loadRequest	새로운 URL로 이동
setNavigationDelegate	NavigationDelegate 객체를 입력해야 함  대표적인 콜백 함수로는 - onProgress : 새로운 페이지 열어서 로딩 될때마다 실행되는 함수. 진행도를 0부터 1사이의 값으로 받을 수 있음  - onPageStarted : 새로운 페이지로 이동하면 실행되는 콜백 함수. 이동하고 있는 페이지의 url을 콜백 함수의 매개변수로 입력받음 - onPageFinished : 새로운 페이지로 이동이 완료되면 실행되는 콜백 함수, 로딩 완료된 웹페이지의 url을 매개변수로 입력받음

 

---

2. 사전 준비 

1) 프로젝트 생성 

 

 

2) pubspec.yaml 설정 

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.6
  webview_flutter: 4.4.1 # 추가

pubpec 추가 · soo-toance/2024-flutter-chapter8-blog-webapp@bdd0354 (github.com)

pubpec 추가 · soo-toance/2024-flutter-chapter8-blog-webapp@bdd0354

 

flutter pub get #pubspec.yaml 파일에 등록한 플러그인들을 내려받는다 
flutter pub add [플러그인 이름] #pubspec.yaml에 플러그인 추가 
flutter pub upgrade #pubsepc.yaml에 플러그인 모두 최신 버전으로 업데이트 
flutter pub run #현재 프로젝트 실행. 명령어 실행하면 어떤 플랫폼에서 실행할지 선택할 수 있음

 

---

3. 권한 설정 

1) 안드로이드 

- anroidmanifest.xml 파일에 인터넷 권한 허용 

 <uses-permission android:name="android.permission.INTERNET" />

 

 

- build.gradle에 minsdkversion, compilesdkversion 설정

ㄴ minsdkversion : 안드로이드 운영체제 최소 SDK 버전 설정

ㄴ compilesdkversion : 앱 빌드할 때 사용할 sdk version 

 

- androidmanifest에 http 프로토콜 허용 

    <application
        android:label="chapter8_blog_webapp"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">

 

 

2) IOS 

- info.plist 파일은 ios 앱의 런타임 설정하는 파일 

- info.plist 에 http 설정 하용 기능 추가 

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

ios 권한 설정 · soo-toance/2024-flutter-chapter8-blog-webapp@afe1e98 (github.com)

ios 권한 설정 · soo-toance/2024-flutter-chapter8-blog-webapp@afe1e98

 

About Info.plist Keys and Values (apple.com)

About Info.plist Keys and Values

 

 

3) 프로젝트 초기화하기 

- const 인스턴스 위젯은 재활용 되어서 하드웨어 리소스를 적게 사용할 수 있음. 

- lib > screen > home_screen.dart 로 분리 

프로젝트 초기화 · soo-toance/2024-flutter-chapter8-blog-webapp@53bfcbe (github.com)

프로젝트 초기화 · soo-toance/2024-flutter-chapter8-blog-webapp@53bfcbe

 

home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {

  // const 생성자
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('Home screen'),
    );
  }
}

 

main.dart

import 'package:chapter8_blog_webapp/screen/home_screen.dart';
import 'package:flutter/material.dart';

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

 

- import 시 private 속성은 불러오기에서 제외됨