[flutter] 플러터 Riverpod를 사용하여 앱에 웹뷰 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 프레임워크로, 다양한 기능을 쉽게 구현할 수 있습니다. 웹뷰 기능을 앱에 추가하는 방법을 알아보겠습니다. 이를 위해 Riverpod라는 Flutter 상태 관리 라이브러리를 사용할 것입니다.

먼저, 프로젝트에 Riverpod를 추가해야 합니다. pubspec.yaml 파일에 다음 dependencies를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.3
  webview_flutter: ^2.0.13

이제 아래와 같이 코드를 작성하여 웹뷰를 추가할 수 있습니다.

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

final webViewControllerProvider = Provider<WebViewController>((ref) {
  // WebView Controller를 생성하여 제공합니다.
  return WebViewController();
});

final urlProvider = Provider<String>((ref) {
  // 웹뷰에 로드할 URL을 제공합니다.
  return 'https://www.example.com';
});

class WebViewScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final url = watch(urlProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: url,
        onWebViewCreated: (WebViewController controller) {
          // 제공받은 WebView Controller를 설정합니다.
          context.read(webViewControllerProvider).state = controller;
        },
      ),
    );
  }
}

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        home: WebViewScreen(),
      ),
    ),
  );
}

위 코드에는 webview_flutter 패키지를 사용하여 WebView를 구현한 위젯(WebViewScreen)이 있습니다. webview_flutter 패키지는 플러터에서 웹 콘텐츠를 포함하는 뷰를 제공하는 패키지입니다. WebView 위젯 내부에 웹뷰를 띄울 URL을 전달하면 해당 URL의 웹페이지가 표시됩니다.

또한, flutter_riverpod 패키지를 사용하여 상태 관리를 하고 있습니다. webViewControllerProvider는 WebViewController를 제공하고, urlProvider는 로드할 URL을 제공합니다. 이렇게 제공받은 WebViewController를 WebView 위젯의 onWebViewCreated 콜백에서 설정함으로써 WebView와 상호작용할 수 있습니다.

위와 같이 코드를 작성하고 실행하면, 앱에 WebView 기능이 추가된 것을 확인할 수 있습니다.

이 예제를 통해 플러터 Riverpod를 사용하여 앱에 웹뷰 기능을 추가하는 방법에 대해 알아보았습니다. 해당 기능을 활용하여 플러터 앱을 개발하는 데 도움이 되길 바랍니다.