08 블로그 웹 앱

[Must Have 코드팩토리의 플러터 프로그래밍]

08 블로그 웹 앱

avocado8 2024. 5. 2. 20:17

#콜백함수 #웹뷰 #네이티브설정

8.1 사전 지식

8.1.1 콜백 함수

일정 작업이 완료되면 실행되는 함수. 정의 시 바로 실행되는 것이 아닌, 특정 조건이 성립될 때 실행된다.

ex) onPageFinished()에 작성한 함수는 웹뷰에서 페이지 로딩이 완료되면 실행된다.

8.1.2 웹뷰 위젯

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

네이티브 컴포넌트에 비해 속도가 느리고 애니메이션이 부자연스럽지만, 기존 웹사이트를 손쉽게 활용할 수 있음

웹뷰 위젯은 controller 파라미터에 WebViewController 객체를 입력해야 한다. 웹뷰 컨트롤러는 웹뷰 위젯을 제어하는 데 필요한 기능들을 제공한다.

*웹뷰 위젯의 속성

- setJavascriptMode 웹뷰에서 자바스크립트 실행 허용 여부 결정 (unrestricted / disabled)

- setBackgroundColor 배경생

- loadRequest 새로운 url로 이동

- setNavigationDelegate NavigationDelegate 객체 입력. 대표적인 콜백 함수 : onProgress(새 페이지 로딩될 때마다 실행), onPageStarted(새 페이지로 이동하면 실행), onPageFinished(새 페이지 이동 완료시 실행)

8.1.3 안드로이드와 iOS 네이티브 설정

네이티브 설정이 필요할 경우 일반적으로 해당 플러그인의 pub.dev 페이지에서 확인

8.2 사전 준비

8.2.1 pubspec.yaml 설정

webview_flutter 플러그인 설치

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

* 주요 pub 명령어

- flutter pub get : pubspec.yaml에 등록한 플러그인들 내려받기

- flutter pub add [플러그인 이름] : pubspec.yaml에 플러그인 추가

- flutter pub upgrade : 등록된 플러그인들을 최신 버전으로 모두 업데이트

- flutter pub run : 현재 프로젝트 실행

8.2.2 권한 및 네이티브 설정하기

웹뷰 사용 시 필요한 네이티브 설정 (인터넷 사용 권한, https, http 프로토콜)

1) 안드로이드 설정

* 자주 사용하는 안드로이드 권한 코드

- INTERNET 인터넷 사용

- CAMERA 카메라 사용

- WRITE_EXTERNAL_STORAGE 앱 외부에 파일 저장

- READ_EXTERNAL_STORAGE 앱 외부의 파일 읽기

- VIBRATE 진동

- ACCESS_FINE_LOCATION GPS와 네트워크를 모두 사용해 정확한 현재 위치 정보 가져오기

- ACCESS_COARSE_LOCATION 네트워크만 사용해 대략적인 위치 정보 가져오기

- ACCESS_BACKGROUND_LOCATION 앱이 배경에 있을 때 위치 정보를 얻을 수 있는 권한

- BILLING 인앱 결제 권한

- CALL_PHONE 전화기 앱 사용하지 않고 전화할 수 있는 권한

- NETWORK_STATE 네트워크 상태 가져올 권한

- RECORD_AUDIO 음성 녹음할 수 있는 권한

+ android/app/build.gradle에서 compileSdkVersion을 33, minSdkVersion을 20으로 설정

+ http는 이제 거의 안 쓰니까 따로 설정x

2) iOS 설정

http 설정 안 할 거라 넘어감

할거면 NSAppTransportSecurity key를 추가해주면 된다

ios/Runner/Info.plist 파일에서 권한 요청 시 보여줄 메시지를 정의한다.

예시)

<key>NSAppleMusicUsageDescription</key>

<string>음악을 재생하는 권한이 필요합니다.</string>

* 환경 파일

- pubspec.yaml 프로젝트 설정 변경

- android/app/src/main/AndroidManifest.xml 안드로이드 시스템 앱의 코드를 실행하기 전에 필수로 확보해야 하는 앱에 대한 정보. 앱 권한 등 안드로이드 네이티브 관련 설정

- android/build.gradle 안드로이드에서 사용하는 그레들 설정 파일. 최상단 build.gradle 파일은 프로젝트 단 설정을 함

- android/app/build.gradle 안드로이드에서 사용하는 그레들 설정 파일. 앱 모듈 관련 설정

- ios/Runner/Info.plist iOS 앱 실행 패키지에 관한 필수 설정 정보

8.2.3 프로젝트 초기화하기

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

class HomeScreen extends StatelessWidget{
  const HomeScreen({Key? key}) : super(key: key);

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

//lib/main.dart
import 'package:blog_web_app/screen/home_screen.dart';
import 'package:flutter/material.dart';

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

8.4 구현하기

앱바와 웹뷰로 이루어진 레이아웃을 구현할 것이므로 앱바 -> 웹뷰 -> 웹뷰 컨트롤러 -> 홈 버튼을 차례로 구현.

앱바는 제목과 홈 버튼을 렌더링하고, 웹뷰는 지정한 URL의 내용(웹페이지)을 보여준다.

8.4.1 앱바 구현하기

HomeScreen에 앱바 추가하기

8.4.2 웹뷰 구현하기

웹뷰 플러그인 불러와 scaffold body에 웹뷰 설정

WebViewWidget을 사용한다.

body: WebViewWidget(
  controller: webViewCotroller,
),

webViewController을 아직 선언하지 않아서 에러 발생

8.4.3 웹뷰 컨트롤러 설정하기

웹뷰 컨트롤러 : 웹뷰 위젯을 제어하는 역할. 웹뷰 컨트롤러의 함수를 실행해 웹뷰 위젯의 다양한 설정을 제어하고 웹사이트로 이동할 수 있다.

WebViewController을 선언하고 - loadRequest() 함수를 실행해 웹페이지 가져오고 - Javascript 제한 없이 실행되도록 설정

loadRequest() : Uri 객체를 매개변수로 입력받으며 그 값을 통해 지정한 사이트로 이동.

Uri.parse() 함수에 이동할 사이트 URL을 입력하면 해당 URL이 Uri 객체로 자동 변경됨.

내 블로그로 바꿔야징

8.4.4 main.dart 파일 수정하기

runApp() 함수는 내부적으로 WidgetFlutterBinding, ensureInitialized() 함수를 실행한다. 이는 플러터 프레임워크가 앱을 실행할 준비가 됐는지 확인하는 역할.

일반적으로 직접 이 함수를 실행할 필요는 없지만, StatelessWidget에서 WebViewController를 프로퍼티로 직접 인스턴스화하려면 ensureInitialized() 를 직접 실행하주는 작업을 해야 한다.

main.dart를 아래처럼 수정. 플러터 프레임워크가 앱을 실행할 준비가 될 때까지 기다린다.

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

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

8.4.5 홈 버튼 구현하기

actions 매개변수에 위젯을 입력하면 AppBar의 우측 끝에 순서대로 위젯이 배치된다.

안에 IconButton 위젯을 넣고, 누르면 블로그 홈페이지가 로드되도록 웹뷰 컨트롤러를 사용해준다.

8.5 테스트하기

웹 페이지 불러오기, 홈 이동 모두 잘 작동한다.

웹뷰 컨트롤러의 goBack(), goForward() 함수로 페이지 뒤로/앞으로 가기 버튼을 추가할 수 있 다