🍞 Flutter 위젯 시리즈: SnackBar & Toast 완전 정복

앱에서 사용자에게 간단한 알림을 보여줄 땐 SnackBar와 Toast가 필수죠!
이 둘의 차이점과 실무 활용 팁까지 한 번에 정리해드립니다.

---

✅ 1. SnackBar란?

SnackBar는 화면 하단에 잠시 나타나는 머티리얼 디자인 알림창입니다.
사용자에게 상태 메시지를 전달할 때 자주 사용합니다.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('저장되었습니다!'),
    duration: Duration(seconds: 2),
    action: SnackBarAction(
      label: '취소',
      onPressed: () {
        // 취소 로직 작성
      },
    ),
  ),
);

✔️ ScaffoldMessenger를 통해 호출해야 합니다.

---

✅ 2. SnackBar 주요 옵션

• content: 표시할 메시지
• duration: 표시 시간
• action: 사용자 동작 버튼 추가

➡️ 간단하지만 되돌리기(Undo) 같은 액션과 함께 사용하면 UX가 좋아집니다.

---

✅ 3. Flutter Toast란?

Flutter는 기본적으로 Toast 위젯이 없습니다.
하지만 패키지로 간단히 사용할 수 있습니다.

가장 많이 쓰는 것은 fluttertoast 패키지입니다.

flutter pub add fluttertoast

import 'package:fluttertoast/fluttertoast.dart';

Fluttertoast.showToast(
  msg: "데이터가 저장되었습니다!",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.BOTTOM,
  backgroundColor: Colors.black87,
  textColor: Colors.white,
  fontSize: 16.0,
);

✔️ ToastGravity로 위치 지정 가능!

---

✅ SnackBar vs Toast 차이

구분	SnackBar	Toast
위치	화면 하단 (머티리얼 가이드)	화면 어디든 가능
기본 제공	Flutter 내장	패키지 설치 필요
사용 예시	상태 알림, 되돌리기	간단한 메시지, 디버그

---

✅ SnackBar 자주 쓰는 패턴

여러 페이지에서 SnackBar를 안전하게 띄우려면 ScaffoldMessenger를 꼭 사용하세요.

final snackBar = SnackBar(
  content: Text('메시지 전송 완료!'),
);

ScaffoldMessenger.of(context).showSnackBar(snackBar);

---

📌 다음 편 예고

• 👉 위젯 시리즈: Flutter TabBar & BottomNavigationBar 활용하기