책 검색 앱 (3)

DetailPage — WebView 사용

import 'package:book_search/presentation/detail/detail_page.dart';
import 'package:book_search/presentation/home/home_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //home: HomePage(),  <- 개발 과정에서 DetailPage를 메인으로 볼 수 있도록 주석처리
      home: DetailPage(),  // <- 코드 업데이트 시 DetailPage를 바로 볼 수 있도록 임시지정
    );
  }
}

import 'package:flutter/material.dart';

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("해리포터와 마법사의 돌"),
        centerTitle: true,        
      ),
      body: Text("DetailPage"),
    );
  }
}

WebView

• 플러터에서 웹 페이지 보여줄 때 사용하는 위젯

• flutter_webview vs flutter_inappwebview
• lutter_webview : flutter 공식 팀에서 만들고 관리하지만, 기능이 많이 없음. 이걸로 개발했다가 기능이 안 돼서 flutter_inappwebview로 넘어가는 경우가 많음 ⇒ inappwebview 사용할 것.
• flutter_inappwebview : flutter 공식 팀이 만든 건 아니지만 쿠키 관리, 자바스크립트 상호 작용 등의 기능을 간편하게 할 수 있음.

InAppWebView(
    // InAppWebView 최초 요청할 URL
    initialUrlRequest: URLRequest(
      url: WebUri("https://www.naver.com/"),
    ),
    // WebView 설정 : 외우지 마시오! 버전바뀌면 사용법 바뀌니까 이런설정을 할 수 있다 정도로만 학습바랍니다!
    initialSettings: InAppWebViewSettings(
      // 사용자 제스쳐 없이도 비디오, 오디오 자동재생 가능여부
      mediaPlaybackRequiresUserGesture: true,
      // 페이지 javascript 활성화여부. 웹 브라우저에서는 js 필수불가결한 요소라 true!
      javaScriptEnabled: true,
      // 요청하는 클라이언트의 브라우저 종류, 운영체제, 장치 정보 등을 서버에서 알 수 있게 보낼때 같이 보냄
      // 디폴트로 웹뷰로 되어 있는데 일부 웹페이지에서는 웹뷰로 접속시 차단하는 페이지도 있으니 꼭 설정!
      userAgent:
          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
    ),
    // WebView 네이티브 컴포넌트가 만들어지면 호출됨
    onWebViewCreated: (controller) {
      print('onWebViewCreated');
    },
    // 페이지 로딩이 시작될 때 호출됨
    onLoadStart: (controller, url) {
      print('onLoadStart');
    },
    // 페이지 로딩이 완료되면 호출됨
    onLoadStop: (controller, url) {
      print('onLoadStop');
    },
    // 웹뷰 내 웹 페이지에서 GPS, 카메라 등의 권한을 요청했을때 호출됨
    onPermissionRequest: (controller, request) async {
      print('onPermissionRequest');
      return null;
    },
  )

// 터미널에서
> flutter pub add flutter_inappwebview

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(...),
      body: InAppWebView()
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("해리포터와 마법사의 돌"),
        centerTitle: true,        
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(
          url: WebUri("https://www.naver.com"),
        ),
        initialSettings: InAppWebViewSettings(
          userAgent: "Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36",
        ),
      ),
    );
  }
}