플러터] 내비게이터 백 버튼 제어하기

플러터에서 백 버튼을 제어하는 방법을 알아보자. 백 버튼은 뒤로 가기 버튼, 되돌리기 등 다양한 명칭으로 사용된다. 여기서는 백 버튼이라고 하겠다.

 

 

 

이전 화면으로 돌아가는 방법

플러터에서 내비게이터로 화면을 이동하면 이전 화면으로 돌아가기 위해 기본적으로 2가지 방법을 제공한다.

 

1. 앱바의 백 버튼

2. 안드로이드 시스템의 백 버튼

 

 

보통은 백 버튼의 기능을 그대로 사용해도 문제는 없다. 하지만 데이터가 입력된 폼이 있다면 사용자에게 입력을 취소할 것인지 묻는다든지, 비밀번호를 입력해야 앱을 사용할 수 있어야 한다면 백 버튼의 기능을 제어해야 한다.

 

여기서는 각각의 백 버튼을 제어하는 방법을 알아보겠다.

 

 

 

1. 앱바의 백 버튼 제어하기

MaterialPageRoute로 이동한 화면의 앱바에는 자동으로 백 버튼이 나타난다. 그리고 해당 백 버튼을 누르면 이전 화면으로 돌아갈 수 있다. 앱바의 백 버튼을 제어하려면 AppBar의 leading 속성에 백 버튼을 추가해서 백 버튼을 제어할 수 있다.

AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {
      // 뒤로 가기 버튼을 눌렀을 때 실행되는 코드
      // 이곳에 원하는 동작을 구현합니다.
    },
  ),
  // ...
)

 

 

 

2. 앱바의 백 버튼과 안드로이드 시스템의 백 버튼을 동일하게 제어하기

안드로이드 시스템의 백 버튼을 제어하려면 WillPopScope 위젯을 사용해야 한다. WillPopScope의 child에 Scafold 위젯을 배치하면 된다. WillPopScope 위젯을 이용하면 앱바의 백 버튼과 안드로이드 시스템의 백 버튼을 모두 동일한 방법으로 제어할 수 있다.

WillPopScope(
  onWillPop: () async {
    // 뒤로 가기 버튼을 눌렀을 때 실행되는 코드
    // 이곳에 원하는 동작을 구현합니다.
    return false; // false를 반환하면 뒤로가기가 되지 않습니다.
  },
  child: Scaffold(
    // ...
  ),
)

 

 

 

3. 앱바의 백 버튼과 안드로이드 시스템의 백 버튼을 따로 제어하기

AppBar의 leading과 WillPopScope를 각각 설정하면, 서로 다른 방법으로 제어할 수 있다. 

WillPopScope(
      onWillPop: () async {
        print("WillPopScope");
        return false;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Second Page"),
          leading: IconButton(
            onPressed: () {
              print("AppBar leading");
            },
            icon: Icon(Icons.broken_image),
          )
        ),

 

 

 

예제 코드

다음 코드는 각각의 백 버튼으로 이전 화면으로 이동할 수 없고, 오직 화면의 버튼을 통해서 이전 화면으로 이동하게 된다. 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("First Page")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return const SecondPage();
                },
              ),
            );
          },
          child: const Text("Go to Second Page"),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        print("WillPopScope");
        return false;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Second Page"),
          leading: IconButton(
            onPressed: () {
              print("AppBar leading");
            },
            icon: Icon(Icons.broken_image),
          )
        ),
        body: Center(
            child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text("Go to back"),
        )),
      ),
    );
  }
}