플러터에서 WebView를 사용하는 방법: Webview_flutter 패키지 설정과 활용

 

이 코드는 Flutter 애플리케이션에서 WebView를 사용하여 웹 페이지를 표시하는 예제입니다.

이 예제에서는 webview_flutter, webview_flutter_android, webview_flutter_wkwebview 패키지를 활용하여 Android와 iOS 플랫폼에서 WebView를 사용하는 방법을 보여줍니다.

설정 및 코드 설명

1. 패키지 설치

• webview_flutter: Flutter 애플리케이션에서 WebView를 사용할 수 있게 해주는 패키지입니다.
• webview_flutter_android: Android 플랫폼에서 WebView를 사용하기 위한 패키지입니다.
• webview_flutter_wkwebview: iOS 플랫폼에서 WKWebView를 사용하기 위한 패키지입니다.

설치 명령어

flutter pub add webview_flutter
flutter pub add webview_flutter_android
flutter pub add webview_flutter_wkwebview

 

2. main.dart 설정

WidgetsFlutterBinding.ensureInitialized();는 Flutter가 앱을 실행하기 전에 모든 초기화가 완료되도록 보장합니다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

 

3. android/app/build.gradle 설정

Android의 minSdkVersion을 19로 설정하여 WebView가 지원되도록 합니다.

android {
    defaultConfig {
        minSdkVersion 19
    }
}

 

 

4. iOS 설정

iOS에서는 Xcode를 사용하여 iOS Deployment Target을 11 이상으로 설정해야 합니다. Xcode를 통해 설정을 수정하는 것이 권장됩니다.

 

5. WebView 설정 및 사용

TermsAndPrivacyScreen 위젯에서 WebView를 설정하고 사용합니다. WebViewController를 설정하여 다양한 WebView 관련 설정을 조정합니다.

class TermsAndPrivacyScreen extends StatefulWidget {
  const TermsAndPrivacyScreen({Key? key}) : super(key: key);

  @override
  State<TermsAndPrivacyScreen> createState() => _TermsAndPrivacyScreenState();
}

class _TermsAndPrivacyScreenState extends State<TermsAndPrivacyScreen> {
  late final WebViewController _controller; // WebViewController

  @override
  void initState() {
    super.initState();

    late final PlatformWebViewControllerCreationParams params;

    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    final WebViewController controller =
        WebViewController.fromPlatformCreationParams(params);

    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            debugPrint('WebView is loading (progress : $progress%)');
          },
          onPageStarted: (String url) {
            debugPrint('Page started loading: $url');
          },
          onPageFinished: (String url) {
            debugPrint('Page finished loading: $url');
          },
          onWebResourceError: (WebResourceError error) {
            debugPrint('''
                        Page resource error:
                          code: ${error.errorCode}
                          description: ${error.description}
                          errorType: ${error.errorType}
                          isForMainFrame: ${error.isForMainFrame}
                ''');
          },
          onNavigationRequest: (NavigationRequest request) {
            debugPrint('allowing navigation to ${request.url}');
            return NavigationDecision.navigate;
          },
        ),
      )
      ..addJavaScriptChannel(
        'Toaster',
        onMessageReceived: (JavaScriptMessage message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        },
      )
      ..loadRequest(Uri.parse(
          'https://plip.kr/pcc/a09d61de-0b0f-4823-88cb-3718704594f1/privacy/1.html'));

    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewController.enableDebugging(true);

      (controller.platform as AndroidWebViewController)
          .setMediaPlaybackRequiresUserGesture(false);
    }

    _controller = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        bottom: false,
        child: WebViewWidget(controller: _controller),
      ),
    );
  }
}

 

 

6. 버튼 클릭 시 화면 이동

TextButton을 사용하여 버튼 클릭 시 TermsAndPrivacyScreen으로 이동합니다.

TextButton(
  onPressed: () {
    Get.to(() => const TermsAndPrivacyScreen());
  },
  child: Text(
    '약관 및 정보보호',
    style: TextStyle(color: Colors.white, fontSize: 60.sp),
  ),
)

요약

• WebView를 사용하기 위해 필요한 패키지를 설치하고 설정합니다.
• WebViewController를 사용하여 WebView의 다양한 설정을 구성합니다.
• WebView와의 상호작용을 위해 NavigationDelegate와 JavaScriptChannel을 설정합니다.
• 화면 전환 및 WebView 사용을 위한 UI를 구성합니다.

이 설정을 통해 Flutter 애플리케이션에서 WebView를 효과적으로 사용할 수 있습니다.