[Flutter] Snackbar 사용하기

스낵바 위젯을 사용하면 특정 작업이 발생하고 난 뒤 사용자에게 간략하게 알릴 수 있어서 유용합니다. 

예를 들어 사용자가 데이터를 삭제할 때 혹은 데이터를 전송했을 때 알릴 수 있습니다. 또한 이러한 작업을 취소할 수 있는 옵션을 제공할 수 있습니다. 

---

1. 스낵바 띄우기

1-1. Scaffold 생성

앱을 만들 때 Material Design 가이드라인을 따르면 앱이 일관된 구조와 디자인을 가질 수 있습니다. 

이번 예시에서는 FloatingActionButton과 같은 중요한 위젯을 겹치지 않고 화면 하단에 스낵바를 띄웁니다. 

1-2. Snakbar 표시

Scaffold 위젯 하단에서 SnackBar를 만들고 ScaffoldMessenger를 사용해서 화면에 보여줍니다. 

1-3. 기타 옵션 제공하기

사용자에게 Snackbar가 보여질 때 제공할 액션들을 위한 옵션을 제공하기 위해 메시지를 화면에 띄웁니다. 

2. Display a snackbar 완성

2-1. Display a snackbar 화면

2-2. Display a snackbar 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: const AppBarTheme(color: Colors.amber),
        primaryColor: Colors.amber,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Example'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            backgroundColor: Colors.amber,
            content: const Text('Hello SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {},
            ),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show SnackBar'),
      ),
    );
  }
}

3. 참고자료

https://docs.flutter.dev/cookbook/design/snackbars