개요
Flutter에서 기본적으로 제공하는 BackButton 위젯을 사용하여 이전 화면으로 이동하는 방법에 대해서 알아보겠습니다.
AppBar의 뒤로가기 버튼
지금까지 앱을 개발하면서 AppBar의 뒤로가기 버튼을 다음과 같이 구현하여 사용해 왔습니다.
AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back_ios_new),
splashRadius: 20.0,
onPressed: () => Get.back(),
),
...
),
저는 GetX를 사용하여 앱을 개발하기 때문에 Get.back()을 사용하여 화면 뒤로가기를 구현했습니다.
BackButton 위젯
하지만 Flutter에서는 기본적으로 제공하는 BackButton 위젯을 사용하여 뒤로가기 버튼을 더 간단히 구현할 수 있습니다.
AppBar(
leading: const BackButton(),
...
),
AppBar의 automaticallyImplyLeading
AppBar의 automaticallyImplyLeading 속성을 사용하여 BackButton을 자동으로 표시하거나 숨길 수 있습니다. AppBar의 automaticallyImplyLeading의 기본값은 true이므로, 위와 같이 BackButton을 사용하지 않아도 AppBar에 뒤로가기 버튼이 표시됩니다.
AppBar(
...
),
BackButton의 활용
AppBar의 automaticallyImplyLeading 속성을 false로 설정하지 않는다면 기본적으로 BackButton이 표시되므로, BackButton을 일부러 사용할 필요는 없습니다.
다만, 이전 화면으로 돌아갈 때특정 함수를 호출할 필요가 있는 경우, 다음과 같이 BackButton을 사용하여 구현할 수 있습니다.
AppBar(
leading: BackButton(
onPressed: () {
callback();
Get.back();
},
),
...
),
완료
이것으로 Flutter라 기본적으로 제공하는 BackButton 위젯에 대해서 살펴보았습니다. 저처럼 BackButton의 존재를 모르고 직접 IconButton으로 구현하고 있었다면, BackButton을 사용하여 더 간단하게 구현할 수 있습니다.
또한 AppBar의 leading에 아무 기능도 하지 않는 BackButton을 사용하고 있다면, AppBar의 옵션인 automaticallyImplyLeading으로 뒤로가기 버튼이 자동으로 표시되는 것도 잊지 않으시기 바랍니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)