[flutter] 플러터와 리버포드를 사용한 앱의 웹뷰 통합 방법

21 Dec 2023

flutter

본 문서에서는 플러터(Flutter)와 리버포드(Riverpod)를 사용하여 모바일 앱에서 웹뷰를 통합하는 방법에 대해 살펴보겠습니다.

리버포드 소개

리버포드는 플러터 애플리케이션의 상태 관리를 위한 강력한 라이브러리로, 의존성 주입(Dependency Injection) 및 상태 변화 관리를 지원합니다. 리버포드를 사용하면 앱 전반에 걸쳐 상태를 전역적으로 관리할 수 있으며, 코드를 보다 깔끔하게 유지할 수 있습니다.

final webViewProvider = StateProvider<WebViewController>((ref) {
  return WebViewController();
});

웹뷰 플러그인 추가

플러터 앱에 웹뷰를 통합하기 위해서는 웹뷰 플러그인을 추가해야 합니다. webview_flutter 플러그인은 플러터 앱에서 간편하게 웹뷰를 사용할 수 있도록 지원합니다.

dependencies:
  webview_flutter: ^2.0.12

위의 코드를 pubspec.yaml 파일에 추가하고, 터미널에서 flutter pub get 명령을 실행하여 의존성을 설치합니다.

리버포드를 사용한 웹뷰 관리

리버포드를 사용하여 웹뷰를 관리하면, Provider를 통해 전역적으로 웹뷰 인스턴스를 사용할 수 있습니다. 이를 통해 여러 화면 또는 위젯에서 같은 웹뷰를 공유하면서 상태를 관리할 수 있습니다.

class MyWebViewScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final webViewController = watch(webViewProvider).state;

     return WebView(
        onWebViewCreated: (controller) {
          webViewController.state = controller;
        },
        initialUrl: 'https://www.example.com',
        javascriptMode: JavascriptMode.unrestricted,
      );
  }
}

리버포드와 웹뷰 플러그인을 함께 사용하여 플러터 애플리케이션의 상태를 효과적으로 관리하면서, 웹뷰를 간편하게 통합할 수 있습니다.

요약

본 문서에서는 플러터와 리버포드를 사용하여 모바일 앱에서 웹뷰를 통합하는 방법을 살펴보았습니다. 리버포드를 사용하여 전역적으로 웹뷰 인스턴스를 관리하고, 웹뷰 플러그인을 추가하여 앱에 간편하게 웹뷰를 통합할 수 있었습니다.

참고 문헌:

Flutter: https://flutter.dev/
Riverpod: https://riverpod.dev/
webView_flutter 패키지: https://pub.dev/packages/webview_flutter

목차

리버포드 소개

웹뷰 플러그인 추가

리버포드를 사용한 웹뷰 관리

요약