[flutter] 플러터(Flutter)에서 웹뷰 기능 구현하기

안녕하세요! 이번 포스팅에서는 플러터(Flutter)에서 웹뷰 기능을 구현하는 방법에 대해 알아보겠습니다.

웹뷰란?

웹뷰는 모바일 앱 안에 웹 페이지를 표시하는 기능을 말합니다. 이를 통해 앱 내에서 웹 콘텐츠를 로드하고 표시할 수 있습니다.

플러터에서 웹뷰 구현하기

  1. webview_flutter 패키지 추가하기

    먼저, pubspec.yaml 파일에 아래와 같은 코드를 추가하여 webview_flutter 패키지를 사용할 수 있도록 설정해야 합니다.

    dependencies:
      webview_flutter: ^2.0.0
    
  2. 웹뷰 위젯 생성하기

    다음으로, 웹뷰 위젯을 생성합니다. 이를 위해 webview_flutter 패키지의 WebView 위젯을 사용할 수 있습니다.

    import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    
    class WebViewPage extends StatefulWidget {
      final String url;
    
      const WebViewPage({Key? key, required this.url}) : super(key: key);
    
      @override
      _WebViewPageState createState() => _WebViewPageState();
    }
    
    class _WebViewPageState extends State<WebViewPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('웹뷰'),
          ),
          body: WebView(
            initialUrl: widget.url,
          ),
        );
      }
    }
    

    위 코드에서 WebViewPage 위젯은 initialUrl 속성을 통해 표시할 웹 페이지의 URL을 입력받습니다.

  3. 웹뷰 사용하기

    이제, 웹뷰를 사용하는 화면으로 이동하는 버튼을 만들어보겠습니다. 해당 버튼을 클릭하면 앞서 생성한 WebViewPage 화면으로 이동합니다.

    import 'package:flutter/material.dart';
    
    import 'web_view_page.dart';
    
    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('홈'),
          ),
          body: Center(
            child: ElevatedButton(
              child: Text('웹뷰로 이동'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => WebViewPage(
                      url: 'https://example.com',
                    ),
                  ),
                );
              },
            ),
          ),
        );
      }
    }
    

    위 코드에서 onPressed 이벤트 핸들러에서는 Navigator.push 함수를 사용하여 WebViewPage로 화면을 이동합니다. 이때, WebViewPageurl 속성에 원하는 웹 페이지의 주소를 입력합니다.

  4. 앱 실행 및 테스트

    이제 플러터 앱을 실행하고 웹뷰로 이동하는 버튼을 클릭해보세요. 선택한 웹 페이지가 웹뷰로 로드되어 표시되는 것을 확인할 수 있습니다.

마무리

이상으로 플러터에서 웹뷰 기능을 구현하는 방법에 대해 알아보았습니다. 웹뷰를 이용하면 앱 내에서 웹 콘텐츠를 편리하게 로드하고 표시할 수 있습니다. 이를 응용하여 다양한 기능을 구현해보세요!

참고: webview_flutter