[Flutter] BackButton 위젯 사용법

2024-08-02 hit count image

Flutter에서 기본적으로 제공하는 BackButton 위젯을 사용하여 이전 화면으로 되돌아가는 방법에 대해서 설명합니다.

개요

Flutter에서 기본적으로 제공하는 BackButton 위젯을 사용하여 이전 화면으로 이동하는 방법에 대해서 알아보겠습니다.

AppBar의 뒤로가기 버튼

지금까지 앱을 개발하면서 AppBar의 뒤로가기 버튼을 다음과 같이 구현하여 사용해 왔습니다.

AppBar(
  leading: IconButton(
    icon: const Icon(Icons.arrow_back_ios_new),
    splashRadius: 20.0,
    onPressed: () => Get.back(),
  ),
  ...
),

저는 GetX를 사용하여 앱을 개발하기 때문에 Get.back()을 사용하여 화면 뒤로가기를 구현했습니다.

BacckButton 위젯

하지만 Flutter에서는 기본적으로 제공하는 BackButton 위젯을 사용하여 뒤로가기 버튼을 더 간단히 구현할 수 있습니다.

AppBar(
  leading: const BackButton(),
  ...
),

AppBar의 automaticallyImplyLeading

AppBarautomaticallyImplyLeading 속성을 사용하여 BackButton을 자동으로 표시하거나 숨길 수 있습니다. AppBarautomaticallyImplyLeading의 기본값은 true이므로, 위와 같이 BackButton을 사용하지 않아도 AppBar에 뒤로가기 버튼이 표시됩니다.

AppBar(
  ...
),

BackButton의 활용

AppBarautomaticallyImplyLeading 속성을 false로 설정하지 않는다면 기본적으로 BackButton이 표시되므로, BackButton을 일부러 사용할 필요는 없습니다.

다만, 이전 화면으로 돌아갈 때특정 함수를 호출할 필요가 있는 경우, 다음과 같이 BackButton을 사용하여 구현할 수 있습니다.

AppBar(
  leading: BackButton(
    onPressed: () {
      callback();
      Get.back();
    },
  ),
  ...
),

완료

이것으로 Flutter라 기본적으로 제공하는 BackButton 위젯에 대해서 살펴보았습니다. 저처럼 BackButton의 존재를 모르고 직접 IconButton으로 구현하고 있었다면, BackButton을 사용하여 더 간단하게 구현할 수 있습니다.

또한 AppBarleading에 아무 기능도 하지 않는 BackButton을 사용하고 있다면, AppBar의 옵션인 automaticallyImplyLeading으로 뒤로가기 버튼이 자동으로 표시되는 것도 잊지 않으시기 바랍니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통
Posts