[flutter] BottomSheet에서 웹페이지 열기

14 Dec 2023

flutter

Flutter는 다양한 UI 컴포넌트를 제공하며, BottomSheet는 화면 하단에서 추가 콘텐츠를 표시하는 데 사용됩니다. BottomSheet에서 웹페이지를 열어보겠습니다.

1. 웹페이지 열기

아래의 예제 코드는 Flutter에서 BottomSheet 위젯을 사용하여 웹페이지를 열고 WebView를 통해 표시하는 방법을 보여줍니다.

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('BottomSheet 웹페이지'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    height: 300,
                    child: WebView(
                      initialUrl: 'https://www.example.com',
                      javascriptMode: JavascriptMode.unrestricted,
                    ),
                  );
                },
              );
            },
            child: Text('웹페이지 열기'),
          ),
        ),
      ),
    );
  }
}

위 코드에서 WebView 위젯을 이용하여 BottomSheet 안에서 웹페이지를 표시할 수 있습니다.

2. WebView 플러그인 추가

webview_flutter 패키지를 사용하여 Flutter 앱에서 WebView를 구현할 수 있습니다. pubspec.yaml 파일에 아래의 코드를 추가하여 WebView 플러그인을 사용할 수 있습니다.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.13

3. 웹페이지 열기 예제 실행

위의 예제 코드를 사용하여 Flutter 애플리케이션에서 BottomSheet를 활용해 웹페이지를 열어보세요.

웹페이지를 BottomSheet 안에서 보여주는 것으로 사용자 경험을 더욱 향상시킬 수 있습니다.

이제 Flutter를 사용하여 BottomSheet에서 웹페이지를 열어보세요!

참고 자료

webview_flutter 패키지