[flutter] 플러터 스택드 위젯에서 웹뷰 사용하기

15 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 오픈소스 UI 프레임워크로, 모바일 앱을 빌드하고 배포할 수 있습니다. 여기에서는 플러터의 스택(Stack) 위젯을 사용하여 웹뷰(Webview)를 포함하는 앱을 만드는 방법에 대해 살펴보겠습니다.

1. 웹뷰 패키지 추가하기

먼저 webview_flutter 패키지를 플러터 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 webview_flutter 패키지를 추가합니다.

dependencies:
  webview_flutter: any

패키지를 추가한 후에는 터미널에서 flutter packages get 명령을 실행하여 패키지를 다운로드하고 프로젝트에 추가합니다.

2. 스택 위젯에 웹뷰 추가하기

다음으로, 스택(Stack) 위젯을 사용하여 웹뷰를 다른 위젯과 겹치도록 추가합니다. 아래는 간단한 예제 코드입니다.

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('Webview in Flutter'),
        ),
        body: Stack(
          children: <Widget>[
            WebView(
              initialUrl: 'https://www.example.com',
              javascriptMode: JavascriptMode.unrestricted,
            ),
            // 다른 위젯을 원하는 위치에 추가할 수 있습니다.
          ],
        ),
      ),
    );
  }
}

위 코드에서 Stack 위젯 안에 WebView 위젯을 추가하여 웹뷰를 화면에 표시합니다.

결론

플러터의 스택(Stack) 위젯을 사용하여 웹뷰를 앱에 통합하는 방법에 대해 알아보았습니다. 웹뷰를 통해 웹페이지를 렌더링하고 상호작용하는 앱을 개발할 때 유용한 기능입니다.

플러터 공식 문서 - WebView

이제 웹뷰를 포함하는 플러터 앱을 빌드하고 테스트해보세요!