[flutter] 플러터에서의 웹뷰 사용 방법

30 Nov 2023

flutter

플러터(Flutter)는 구글에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 웹뷰(Webview)를 사용하여 외부 웹페이지를 앱 내부에서 보여줄 수 있습니다. 이번 글에서는 플러터에서 웹뷰를 사용하는 방법에 대해 알아보겠습니다.

웹뷰 패키지 추가하기

플러터 프로젝트에서 웹뷰를 사용하기 위해서는 웹뷰 패키지를 추가해야 합니다. 가장 인기있는 웹뷰 패키지인 webview_flutter을 사용하도록 하겠습니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.0

위와 같이 패키지를 추가한 뒤, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 받아주세요.

웹뷰 위젯 사용하기

이제 웹뷰 위젯을 사용하여 외부 웹페이지를 앱 내에서 보여줄 수 있습니다. main.dart 파일에서 아래의 코드를 추가해보세요.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  final _url = 'https://www.google.com'; // 보여줄 웹페이지 URL

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView'),
      ),
      body: WebView(
        initialUrl: _url,
      ),
    );
  }
}

위의 코드에서 보여줄 웹페이지의 URL을 _url 변수에 지정하고, WebView 위젯을 통해 해당 URL을 불러옵니다. 앱을 실행하여 확인해보면, 앱 상단에는 앱 이름이 표시되고, 중앙에는 지정한 웹페이지가 보여지는 것을 볼 수 있습니다.

추가 설정하기

웹뷰를 사용할 때 추가적으로 설정할 수 있는 옵션들이 있습니다. 예를 들어, 웹뷰에 뒤로 가기 버튼을 추가하고 싶다면 WillPopScope와 canGoBack을 사용할 수 있습니다. 아래의 코드를 WebViewPage 클래스에 추가해보세요.

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      if (webView.canGoBack()) {
        webView.goBack();
        return false;
      }
      return true;
    },
    child: Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView'),
      ),
      body: WebView(
        initialUrl: _url,
        onWebViewCreated: (WebViewController controller) {
          webView = controller;
        },
      ),
    ),
  );
}

위의 코드에서 WillPopScope를 사용하여 뒤로 가기 버튼이 눌렸을 때의 동작을 처리하고, onWebViewCreated 콜백 메서드를 통해 WebViewController를 사용하여 웹뷰를 제어할 수 있습니다.

결론

이번에는 플러터에서 웹뷰를 사용하는 방법에 대해 알아보았습니다. 웹뷰를 사용하면 앱 내에서 웹페이지를 보여줄 수 있어서 다양한 기능을 활용할 수 있습니다. 앞으로 플러터 개발을 할 때 웹뷰를 사용하는 일이 있다면, 위의 내용을 참고하여 구현해보세요.