[flutter] Swipeable Widget을 이용한 웹 뷰 구현 방법

08 Dec 2023

flutter

Flutter에서 웹 뷰를 구현하는 방법은 여러 가지가 있지만, Swipeable Widget을 활용하여 웹 페이지를 스와이프하여 이동할 수 있도록 구현하는 방법을 알아보겠습니다. 이를 통해 사용자 친화적인 웹 뷰를 구현할 수 있습니다.

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

dependencies:
  swipeable: ^1.1.6

그리고 다음과 같이 패키지를 설치합니다.

flutter pub get

아래 코드는 Swipeable Widget을 사용하여 웹 뷰를 구현하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:swipeable/swipeable.dart';
import 'package:webview_flutter/webview_flutter.dart';

class CustomWebView extends StatelessWidget {
  final String url;
  final _key = UniqueKey();

  CustomWebView({required this.url});

  @override
  Widget build(BuildContext context) {
    return Swipeable(
      key: _key,
      child: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
      ),
      onSwipeLeft: () {
        final controller = _key.currentState
            as SwipeableState;
        if (controller.page < 1) {
          controller.nextPage();
        }
      },
      onSwipeRight: () {
        final controller = _key.currentState
            as SwipeableState;
        if (controller.page > 0) {
          controller.previousPage();
        }
      },
    );
  }
}

위 코드는 Swipeable Widget을 사용하여 WebView를 구현한 예시입니다. 사용자가 왼쪽 또는 오른쪽으로 스와이프하여 페이지를 이동할 수 있습니다.

이제 이 CustomWebView 위젯을 사용하여 앱에 웹 뷰를 표시할 수 있습니다.

이러한 방식으로 Swipeable Widget을 사용하여 웹 뷰를 구현할 수 있습니다. 이를 통해 사용자가 쉽게 웹 페이지를 스와이프하여 이동할 수 있게 됩니다.

더 많은 정보를 원하시면 swipeable 패키지 문서를 참고하세요.

내용에 대한 질문이 있으시면 언제든지 물어보세요!

1. Swipeable Widget 추가

2. Swipeable Widget으로 웹 뷰 구현