Builder.shin

Flutter 웹 앱에서 브라우저 뒤로가기 처리하기

문제 상황

사내 관리자 도구를 Flutter Web으로 마이그레이션하는 작업을 진행 중이었다. 모바일 앱은 문제없이 동작했는데, 웹 버전에서 브라우저의 뒤로가기 버튼을 누르면 Flutter의 Navigator 스택이 아닌 실제 이전 페이지로 이동하는 문제가 발생했다.

// 이 방법은 웹에서 동작하지 않았다
WillPopScope(
  onWillPop: () async {
    return false;
  },
  child: Scaffold(...),
)

해결 방법

결국 url_strategy 패키지와 go_router를 사용하는 방향으로 변경했다. Flutter 2.10부터 url_strategy가 안정화되면서 웹 라우팅을 좀 더 명확하게 제어할 수 있게 되었다.

// main.dart
import 'package:flutter_web_plugins/url_strategy.dart';

void main() {
  usePathUrlStrategy(); // # 제거
  runApp(MyApp());
}

// router 설정
final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/detail/:id',
      builder: (context, state) {
        final id = state.params['id']!;
        return DetailPage(id: id);
      },
    ),
  ],
);

브라우저 히스토리와 Flutter의 라우팅이 동기화되면서 뒤로가기가 예상대로 동작했다. 다만 go_router는 아직 1.0이 안 나온 상태라 breaking change가 좀 있었지만, 웹 지원 때문에 감수할 만했다.

추가 고려사항

  • PWA로 배포할 경우 flutter_web_plugins의 설정이 필수
  • 딥링크 처리를 위해 라우트 구조를 미리 설계해야 함
  • SEO가 중요하다면 SSR이 안 되는 Flutter Web보다는 Next.js 검토 필요

모바일 우선 프로젝트가 아니라면 Flutter Web은 여전히 신중하게 선택해야 한다는 생각이다.

Flutter 웹 앱에서 브라우저 뒤로가기 처리하기