[Flutter] 플러터 웹뷰 뒤로가기 기능 구현(webview_flutter)

 

웹뷰 앱을 만들면 뒤로가기 버튼을 누를 때 앱이 꺼지는 현상이 발생한다.

그럴 때 앱 개발 쪽에서 컨트롤을 해줘야 한다.

플러터로 그렇게 컨트롤 기능 구현하여 기록한다.

하지만 iOS는 뒤로가기 스와이프 기능이 있는데 webview_flutter 패키지에서는 구현을 하지 못했다.
InAppWebView로는 구현이 가능하다는 데 다음엔 InAppWebView로 웹뷰를 구현해서 해봐야겠다.

 

0. 웹뷰 구현하기

https://ruriruriya.tistory.com/270

[Flutter] 플러터 웹뷰 앱 만들기 (package:webview_flutter)

 

1. 안드로이드 뒤로가기 대응 함수 생성

// 안드로이드 뒤로가기 대응 함수
  Future<bool> _onWillPop() async {
    if (await _controller.canGoBack()) {
      _controller.goBack(); // WebView 내 뒤로가기 실행
      return false; // 앱 종료 방지
    }
    return true; // 뒤로 갈 페이지 없으면 앱 종료 허용
  }

 

2. WillPopScope 위젯으로 WebView 감싸기

@override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _onWillPop,
      child: Scaffold(
        backgroundColor: Colors.white,
        resizeToAvoidBottomInset: true,
        body: SafeArea(
          child: WebViewWidget(controller: _controller),
        ),         
      ),
    );
  }

 

3. 전체코드

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});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData( 
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController _controller;

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

  // 안드로이드 뒤로가기 대응 함수
  Future<bool> _onWillPop() async {
    if (await _controller.canGoBack()) {
      _controller.goBack(); // WebView 내 뒤로가기 실행
      return false; // 앱 종료 방지
    }
    return true; // 뒤로 갈 페이지 없으면 앱 종료 허용
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _onWillPop,
      child: Scaffold(
        backgroundColor: Colors.white,
        resizeToAvoidBottomInset: true,
        body: SafeArea(
          child: WebViewWidget(controller: _controller),
        ),         
      ),
    );
  }
}