[flutter] BottomSheet 웹뷰 사용하기

14 Dec 2023

flutter

웹뷰를 BottomSheet로 표시하여 사용자 경험을 향상시키고 싶다면, Flutter에서 제공하는 BottomSheet 위젯을 사용할 수 있습니다. BottomSheet를 사용하면 모바일 앱의 UI/UX를 개선하고, 사용자가 콘텐츠를 쉽게 탐색할 수 있게 됩니다.

이번 블로그에서는 Flutter 앱에서 BottomSheet를 사용하여 웹뷰를 표시하는 방법을 알아보겠습니다.

웹뷰 라이브러리 추가

먼저, 웹뷰를 사용하기 위해 webview_flutter 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.10

위와 같이 webview_flutter 패키지를 추가한 후, pubspec.yaml 파일을 저장하고 Flutter 앱을 다시 빌드해야 합니다.

BottomSheet로 웹뷰 표시하기

BottomSheet를 사용하여 웹뷰를 표시하려면 아래와 같이 WebView 위젯과 showBottomSheet 함수를 사용하여 구현할 수 있습니다.

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: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Webview in BottomSheet'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showBottomSheet(
              context: context,
              builder: (context) => Container(
                height: 300,
                child: WebView(
                  initialUrl: 'https://www.example.com',
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              ),
            );
          },
          child: Text('Open Webview'),
        ),
      ),
    );
  }
}

위 코드에서는 ElevatedButton을 터치하면 showBottomSheet 함수를 호출합니다. showBottomSheet 함수는 WebView 위젯을 포함하는 BottomSheet를 표시합니다.

위 코드를 실행하면 “Open Webview” 버튼을 탭하면 BottomSheet가 표시되고, 해당 BottomSheet에 웹페이지가 로드된 웹뷰가 나타납니다.

이렇게 BottomSheet와 웹뷰를 함께 사용하여 사용자들에게 더 편리한 경험을 제공할 수 있습니다.

참고 자료