Flutter WebView

Flutter WebView 활용 가이드

Flutter에서 웹 콘텐츠를 표시할 때 webview_flutter 패키지를 사용하면 손쉽게 WebView를 구현할 수 있습니다. 이번 포스팅에서는 WebView를 적용하는 방법과 주요 기능을 살펴보겠습니다.

1. WebView 패키지 설치

먼저, webview_flutter 패키지를 pubspec.yaml에 추가하고 설치해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.2  # 최신 버전 확인 후 적용

이후, 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. WebView 기본 적용

WebView를 사용하려면 WebViewController를 활용하여 웹 페이지를 로드해야 합니다.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WebViewScreen(),
    );
  }
}

class WebViewScreen extends StatefulWidget {
  @override
  _WebViewScreenState createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () => _controller.reload(),
          )
        ],
      ),
      body: WebViewWidget(controller: _controller),
    );
  }
}

위 코드에서는 기본적으로 flutter.dev를 로드하는 WebView를 생성합니다.

3. 주요 기능 살펴보기

(1) JavaScript 활성화 및 제어

기본적으로 JavaScript는 비활성화되어 있습니다. JavaScript를 활성화하려면 아래와 같이 설정합니다.

_controller.setJavaScriptMode(JavaScriptMode.unrestricted);

(2) 특정 URL 차단

웹 페이지 로딩을 제어하려면 setNavigationDelegate를 활용하면 됩니다.

_controller.setNavigationDelegate(
  NavigationDelegate(
    onNavigationRequest: (request) {
      if (request.url.contains('blocked.com')) {
        return NavigationDecision.prevent;
      }
      return NavigationDecision.navigate;
    },
  ),
);

(3) 뒤로 가기 기능 구현

사용자가 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 이동하도록 처리할 수도 있습니다.

Future<bool> _onWillPop() async {
  if (await _controller.canGoBack()) {
    _controller.goBack();
    return false;
  }
  return true;
}

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: _onWillPop,
    child: Scaffold(
      body: WebViewWidget(controller: _controller),
    ),
  );
}

(4) 로딩 상태 표시

웹 페이지 로딩 중 상태를 표시하려면 WebViewController를 활용하여 상태를 감지할 수 있습니다.

bool isLoading = true;

_controller.setNavigationDelegate(
  NavigationDelegate(
    onPageStarted: (url) {
      setState(() {
        isLoading = true;
      });
    },
    onPageFinished: (url) {
      setState(() {
        isLoading = false;
      });
    },
  ),
);

Stack(
  children: [
    WebViewWidget(controller: _controller),
    if (isLoading)
      const Center(child: CircularProgressIndicator()),
  ],
);

4. 결론

Flutter에서 WebView를 활용하면 손쉽게 웹 콘텐츠를 앱 내에서 표시할 수 있습니다. webview_flutter 패키지를 사용하여 기본적인 웹 페이지 로드부터 JavaScript 지원, 네비게이션 제어, 로딩 표시 등의 다양한 기능을 적용할 수 있습니다. 필요에 따라 커스텀 로직을 추가하여 더욱 완성도 높은 WebView 기능을 구현해 보세요!

이 포스팅이 도움이 되셨다면 댓글로 의견을 남겨주세요! 😊