[✈️] 항공권 가격 검색 앱 개발해보기 <3> 웹 뷰

첫 번째 기능인 이벤트 페이지를 보여주는 기능부터 구현해보자.

 

외부 브라우저가 아닌 앱 내부에서 이벤트 페이지를 보여주기 위해 '웹 뷰' 형식을 사용해보려고 한다.

 

먼저 pubspec.yaml 파일의 종속성(dependencies)에

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.13.1

이런식으로 최신버전을 추가해주고
터미널에서 flutter pub get 으로 웹 뷰 패키지를 설치해준다.

 

설치가 완료되었다면 웹뷰 권한 설정을 위해
android/app/src/main/AndroidManifest.xml 파일에

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

두 권한을 추가해준다.

 

이제 코드로 돌아가서

class AirlineEvent {
  final String name;
  final String url;
  AirlineEvent({required this.name, required this.url});
}

위와 같이 형식을 정의해주고,

final List<AirlineEvent> events = [
  AirlineEvent(name: '대한항공', url: 'https://www.koreanair.com/contents/promotion/list'),
  AirlineEvent(name: '아시아나항공', url: 'https://flyasiana.com/C/KR/KO/event/index?menuId=CM201802220000728482')
];

 

테스트로 두 항공사의 이름과 이벤트 페이지 url을 추가했다.

 

앞서 정의했던 이벤트 페이지 위젯에는 각 항공사별 버튼을 넣어주고

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: events.map((event) {
        return ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => EventWebView(
                  title: event.name,
                  url: event.url,
                ),
              ),
            );
          },
          child: Text(event.name),
        );
      }).toList(),
    );
  }
}

 

최종적으로 웹 뷰를 담당하는 위젯을 작성하면

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

class EventWebView extends StatefulWidget {
  final String title;
  final String url;

  const EventWebView({
    super.key,
    required this.title,
    required this.url,
  });

  @override
  State<EventWebView> createState() => _EventWebViewPageState();
}

class _EventWebViewPageState extends State<EventWebView> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

 

버튼을 누르면 입력한 이벤트 페이지가 잘 출력되는것을 확인할 수 있다.

 

* 에뮬레이터에서 앱 실행하는 방법

터미널에서 flutter emulators를 입력하여 에뮬레이터 이름을 확인한 뒤,

flutter emulators --launch 에뮬레이터이름 을 입력하여 에뮬레이터를 실행하고 flutter run을 입력하면

에뮬레이터에서 앱이 실행된다.