Flutter Snack Bar 제거하기

Flutter는 다양한 UI 요소를 지원하며, 그 중 하나인 Snack Bar는 사용자가 특정 작업을 수행했을 때 피드백을 제공하는 데 유용합니다. 그러나 특정 화면에서만 Snack Bar를 표시하고 다른 화면으로 넘어갈 때 이를 제거하고자 하는 경우가 있습니다.

본 글에서는 Flutter에서 Snack Bar를 어떻게 제거할 수 있는지, 그리고 이를 구현하기 위한 다양한 방법에 대해 자세히 설명하겠습니다.

Snack Bar와 Toast의 차이점

Snack Bar는 화면 하단에 임시 메시지를 표시하는 UI 요소이며, 사용자가 특정 작업을 수행했음을 알리는 데 주로 사용됩니다. Snack Bar는 화면의 다른 요소 위에 표시되며, 특정 시간 동안만 나타났다가 사라집니다.

반면, Toast는 사용자에게 간단한 메시지를 전달하는 또 다른 방법으로, 일반적으로 화면 하단에 고정되어 있어 스크롤 시에도 이동하지 않습니다. 이 두 요소의 차이점을 이해하는 것은 Flutter에서 UI를 설계하는 데 매우 중요합니다.

요소	위치	지속 시간	상호작용 가능성
Snack Bar	하단 이동 가능	제한된 시간 후 사라짐	가능 (액션 버튼 포함)
Toast	하단 고정	짧은 시간 후 사라짐	불가능

Snack Bar 제거하기

Snack Bar를 특정 화면에서만 표시하고 다른 화면으로 넘어갈 때 이를 제거하는 방법에는 여러 가지가 있습니다. 일반적으로 사용되는 방법 중 하나는 Scaffold.of(context)를 사용하는 것입니다.

그러나 이 메소드는 현재의 BuildContext에서 위로 올라가 가장 가까운 Scaffold 위젯을 반환하기 때문에, 경우에 따라 기대한 대로 작동하지 않을 수 있습니다. 이 문제를 해결하기 위해 Builder 위젯을 사용하여 새로운 Context를 전달받아 사용할 수 있습니다.

이를 통해 Widget Tree 상에서 Builder 위젯 위에 위치한 Scaffold 위젯을 찾아 Snack Bar를 표시할 수 있습니다.

코드 구현 예시

아래는 Snack Bar를 표시하고 제거하는 간단한 코드 예시입니다. 이 예시에서는 Snack Bar를 표시하기 위한 버튼과 함께 현재 화면에서만 Snack Bar가 나타나게끔 설정합니다.

“`dart
import ‘package:flutter/material.dart’;

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(),
);
}
}

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Snack Bar 예제’)),
body: Center(
child: ElevatedButton(
onPressed: () {
showSnackBar(context);
},
child: Text(‘스낵바 표시’),
),
),
);
}

void showSnackBar(BuildContext context) {
final snackBar = SnackBar(content: Text(‘안녕하세요! 스낵바입니다.’));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
}
“`

위의 코드를 실행하면 ‘스낵바 표시’ 버튼을 클릭할 시 Snack Bar가 화면에 나타납니다. 그러나 다른 화면으로 넘어가면 Snack Bar가 더 이상 표시되지 않습니다.

코드 요소	설명
`ScaffoldMessenger`	Snack Bar를 표시하기 위해 필수적인 요소
`showSnackBar`	Snack Bar를 화면에 표시하는 메소드

다른 내용도 보러가기 #1

페이지 전환 시 Snack Bar 제거하기

Flutter에서 페이지 전환을 할 때 Snack Bar를 명시적으로 제거하고 싶다면, Navigator의 push 또는 pop 메소드를 사용할 수 있습니다. 이 과정에서 Snack Bar를 제거하는 방법은 다음과 같습니다.

현재 Snack Bar가 표시되고 있는 경우, 이를 제거합니다.
새로운 페이지로 전환합니다.

아래는 페이지 전환 시 Snack Bar를 명시적으로 제거하는 방법을 보여주는 코드입니다.

“`dart
void navigateToNextScreen(BuildContext context) {
// 현재 Snack Bar 제거
ScaffoldMessenger.of(context).hideCurrentSnackBar();

// 새로운 페이지로 전환
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NextScreen()),
);
}
“`

이 코드는 현재 Snack Bar를 숨긴 후, 새로운 화면으로 전환하는 방법을 보여 줍니다. 이러한 방식으로 페이지 전환 간의 Snack Bar 상태를 조절할 수 있습니다.

메소드	설명
`hideCurrentSnackBar`	현재 표시되고 있는 Snack Bar를 숨기는 메소드
`Navigator.push`	새로운 페이지로 전환하는 메소드

Snack Bar의 다양한 사용 사례

Snack Bar는 사용자의 피드백을 제공하는 데 매우 유용합니다. 다음은 Snack Bar의 다양한 사용 사례입니다.

정보 제공: 특정 작업이 완료되었음을 알리는 메시지를 제공할 수 있습니다.
에러 알림: 사용자가 잘못된 입력을 했을 때 에러 메시지를 표시할 수 있습니다.
행동 유도: Snack Bar에 액션 버튼을 추가하여 사용자에게 추가 작업을 유도할 수 있습니다.

사용 사례	설명
정보 제공	작업 완료 또는 상태 변경 시 알림
에러 알림	사용자 입력 오류 시 알림
행동 유도	추가 작업을 위한 액션 버튼 제공