[Flutter] SnackBar

들어가며

SnackBar 위젯이란?

• 화면 하단에 일시적인 메시지를 표시하는 위젯
• 어떤 작업이 성공적으로 완료되거나 오류가 발생했을 때 사용자에게 알리는 역할.

예제

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Example',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar Example'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            child: Text('GlobalSnackBarPage'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => GlobalSnackBarPage()),
              );
            },
          ),
          ElevatedButton(
            child: Text('LocalSnackBarPage'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => LocalSnackBarPage()),
              );
            },
          ),
        ],
      ),
    );
  }
}

// 해당 페이지를 pop하더라도 SnackBar는 유지되는 예제
class GlobalSnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('GlobalSnackBarPage'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Bye'),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Bye'),
                duration: Duration(seconds: 5),
              ));

              Navigator.pop(context);
            },
          ),
        ));
  }
}

// 해당 페이지를 pop하면 SnackBar도 같이 사라지는 예제
class LocalSnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ScaffoldMessenger를 사용해야함
    return ScaffoldMessenger(
        child: Scaffold(
      appBar: AppBar(
        title: Text('LocalSnackBarPage'),
      ),
      // body를 Builder로 감싸서 생성해야함
      body: Builder(builder: (context) {
        return Center(
          child: ElevatedButton(
            child: Text('Bye'),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Bye'),
                duration: Duration(seconds: 5),
              ));

              Navigator.pop(context);
            },
          ),
        );
      }),
    ));
  }
}

화면