플러터 | 웹뷰에서 이전 url 체크하기

오늘은 Flutter에서 웹뷰를 사용하여 이전 URL을 체크하는 방법에 대해 알아보았다. 웹뷰는 웹 콘텐츠를 앱 내에서 보여주는 강력한 도구로, 다양한 애플리케이션에서 사용된다. 특히 사용자 경험을 향상시키기 위해 웹 페이지 간의 네비게이션을 관리하는 방법이 중요하다는 것을 느꼈다.

먼저, Flutter 프로젝트에 webview_flutter 패키지를 추가하는 것으로 시작했다. pubspec.yaml 파일에 다음과 같이 의존성을 추가했다:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.7  # 최신 버전을 확인하여 추가

이제 웹뷰를 구현할 차례였다. WebView 위젯을 사용해 기본적인 웹 페이지를 로드하고, 이전 URL을 관리하기 위한 로직을 추가했다. 다음과 같은 방식으로 코드를 작성해 보았다:

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State {
  late WebViewController _controller;
  String? _previousUrl; // 이전 URL 저장
  String _currentUrl = ''; // 현재 URL 저장

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter WebView Example"),
        actions: [
          IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () async {
              if (_previousUrl != null) {
                _controller.loadUrl(_previousUrl!);
                setState(() {
                  _currentUrl = _previousUrl!;
                  _previousUrl = null; // 이전 URL 초기화
                });
              }
            },
          ),
        ],
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        onWebViewCreated: (WebViewController controller) {
          _controller = controller;
        },
        onPageFinished: (String url) {
          setState(() {
            _previousUrl = _currentUrl; // 이전 URL 업데이트
            _currentUrl = url; // 현재 URL 업데이트
          });
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: WebViewExample(),
  ));
}

이 코드는 사용자가 웹 페이지를 탐색하면서 이전 URL을 기록하고, AppBar에 있는 뒤로 가기 버튼을 클릭했을 때 이전 페이지로 돌아갈 수 있게 한다. 페이지가 로드될 때마다 현재 URL을 업데이트하고, 이전 URL을 저장하는 구조였다. 이 과정에서 웹뷰의 다양한 기능을 이해하게 되었다.

하지만 WebViewController에는 이전 URL을 관리하는 내장 기능이 없다는 점을 발견했다. 대신, 현재 URL을 가져오는 currentUrl()과 이전 페이지로 이동할 수 있는 goBack() 메서드가 제공된다. 그래서 사용자가 뒤로 가기를 클릭하면 canGoBack()을 통해 이전 페이지가 존재하는지 확인하고, 그 페이지로 이동하는 방식으로 구현했다.

IconButton(
  icon: Icon(Icons.arrow_back),
  onPressed: () async {
    if (await _controller.canGoBack()) {
      _controller.goBack(); // 이전 페이지로 이동
    }
  },
),

이처럼 이전 URL을 직접 관리하는 것이 아니라, 웹뷰의 기본 메서드를 활용해 이전 페이지로 돌아갈 수 있었다. 이 과정에서 Flutter의 웹뷰 기능이 얼마나 유용한지를 새롭게 깨닫게 되었다. 앞으로도 이런 기능들을 더 깊이 있게 탐구하여 사용자 경험을 극대화할 수 있는 방법을 계속해서 찾아보아야겠다.