[flutter] 플러터 Drawer를 사용하여 웹뷰를 구현하는 방법은?

07 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 크로스 플랫폼에서 동작하는 앱을 개발할 수 있습니다. 이번에는 플러터의 Drawer 위젯을 사용하여 웹뷰를 구현하는 방법에 대해 알아보겠습니다.

1. 웹뷰 패키지 추가하기

먼저, 웹뷰를 구현하기 위해 webview_flutter 패키지를 추가해야 합니다. 이 패키지를 사용하면 플러터 앱에서 웹페이지를 로드할 수 있습니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.0

패키지를 추가한 후에는 터미널에서 flutter pub get을 실행하여 패키지를 다운로드 및 설치해야 합니다.

2. Drawer 위젯 구현하기

웹뷰를 표시하기 위해서는 플러터의 Drawer 위젯을 구현해야 합니다. Drawer는 사이드 메뉴를 표시하기 위해 사용되며, 일반적으로 메인 화면 왼쪽 상단에 위치합니다.

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('웹뷰'),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              ListTile(
                title: Text('네이버'),
                onTap: () {
                  Navigator.pop(context);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (BuildContext context) => WebViewPage(
                        title: '네이버',
                        url: 'https://www.naver.com',
                      ),
                    ),
                  );
                },
              ),
              ListTile(
                title: Text('구글'),
                onTap: () {
                  Navigator.pop(context);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (BuildContext context) => WebViewPage(
                        title: '구글',
                        url: 'https://www.google.com',
                      ),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class WebViewPage extends StatelessWidget {
  final String title;
  final String url;

  const WebViewPage({required this.title, required this.url});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

위의 예시 코드는 Drawer를 구현한 플러터 앱입니다. Drawer에는 네이버와 구글을 선택할 수 있는 메뉴가 포함되어 있습니다. 각 메뉴를 선택하면 WebViewPage로 이동하게 되며, WebViewPage에서는 해당 웹페이지를 로드하는 웹뷰를 표시합니다.

위의 예시 코드를 실행하면 앱은 웹뷰를 구현한 후, Drawer를 열고 네이버 또는 구글을 선택할 수 있습니다.

결론

이제 웹뷰를 구현하기 위해 플러터의 Drawer를 사용하는 방법에 대해 알아보았습니다. Drawer를 통해 메뉴를 선택하여 원하는 웹페이지를 로드할 수 있습니다. 이를 기반으로 플러터 앱에서 더 다양한 기능을 개발할 수 있습니다.

더 많은 정보를 원한다면 플러터 공식 문서를 참조해주세요.