[Flutter] 콜백함수와 웹뷰 위젯, 웹뷰 컨트롤러

* 콜백함수?

: 일정 작업이 완료되면 실행되는 함수

(바로 실행되지 않고 특정 조건이 성립될 경우에 실행됨)

 

ex) 웹뷰에서 페이지 로딩이 완료된 뒤에 실행되는 함수 등

 

 

* 웹뷰 위젯

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

= 앱에서 웹브라우저 기능 구현하기

 

네이티브 컴포넌트에 비해 속도가 느리고, 애니메이션 부자연스럽지만

기존 웹사이트 손쉽게 활용 가능하다

 

 

* WebView 위젯 속성

속성	설명
initialUrl	웹뷰에서 처음 실행할 웹사이트를 String 값으로 제공 웹뷰 포함된 위젯이 화면에 생성되면 웹뷰도 생성, initialUrl에 제공된 사이트가 처음으로 실행됨
javascriptMode	웹뷰에서 자바스크립트 실행 허용할지 여부 결정 가능 * JavascriptMode.unrestricted : 제한 없이 실행 가능 * JavascriptMode.disabled : 실행할 수 없음
onWebViewCreated	웹뷰 위젯이 생성되면 실행할 콜백 함수 매개변수 - WebViewController → 뒤로가기, 앞으로가기, ...
onPageStarted	웹뷰가 처음 생성되거나, 페이지 이동했을때 웹페이지 로딩되기 시작하면 실행할 콜백함수  함수 매개변수 - 로딩 시작된 페이지의 URL이 String형으로 제공
onPageFinished	웹페이지 로딩 끝나면 실행됨  로딩 완료된 웹페이지 URL이 String으로 제공
onProgress	웹페이지 로딩 중일때 지속적으로 실행 페이지 로딩 끝날 때까지 실행됨 매개변수 : int 값 (페이지 로딩상태 0 ~ 100)

 

---

* 다트 코드 외 사용하는 환경 파일

파일명	설명
pubspec.yaml	프로젝트 설정을 변경할 때 사용
android/app/src/main/AndroidManifest.xml	안드로이드 시스템 - 앱 코드 실행 전에 필수로 확보해야 하는 앱에 대한 정보 (앱 권한 등)
android/build.gradle	안드로이드 사용 gradle 설정 파일 (*최상단의 build.gradle은 프로젝트 단 설정)
android/app/build.gradle	안드로이드 사용 gradle 설정 파일, 앱 모듈 관련 설정
ios/Runner/Info.plist	iOS앱의 실행 패키지에 관한 필수 설정 정보 XML 구조, 앱에서 사용할 권한 추가시 사용

 

---

import 'package:flutter/material.dart';
//웹뷰 플러그인
import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: Text('Code Factory'),
          centerTitle: true,
        ),
        //웹뷰 관련
        body: WebView(
          initialUrl: 'https://blog.codefactory.ai',
          javascriptMode: JavascriptMode.unrestricted,
        ));
  }
}

 

 

* 웹뷰 컨트롤러 :

웹뷰를 제어할 때 사용

...생략

actions: [ //아이콘 버튼으로 유저의 클릭 입력 받는 콜백 함수 실행 가능
            IconButton(
              onPressed: () {
                if (controller != null) {
                  controller!.loadUrl('https://blog.codefactory.ai');
                }
              },
              
... 생략 ...

body: WebView(
          onWebViewCreated: (WebViewController controller) {
            this.controller = controller;
          },
          initialUrl: 'https://blog.codefactory.ai',
          javascriptMode: JavascriptMode.unrestricted,
        ));
  }
}