[Flutter] Snackbar 위젯

개요

Flutter를 사용해서 앱을 개발해 보려고 합니다. 이번 블로그 포스트에서는 Flutter에서 간단한 메시지를 표시하기 위해 스낵바를 사용하는 방법에 대해서 알아봅니다.

이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/widget

프로젝트 생성

Flutter에서 스낵바를 표시하는 방법을 살펴보기 위해, 다음 명령어를 사용하여 새로운 프로젝트를 생성합니다.

flutter create my_app
cd my_app

스낵바

그럼 이제 새롭게 생성된 프로젝트에서 스낵바를 표시해 봅시다. main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snack bar'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Show Snackbar'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Hello world'),
              ),
            );
          },
        ),
      ),
    );
  }
}

위에 코드는 화면 가운데에 버튼을 표시하고, 해당 버튼을 눌렀을 때, 스낵바가 표시되는 예제입니다.

Center(
  child: ElevatedButton(
    child: Text('Show Snackbar'),
    onPressed: () {
      ...
    },
  ),
),

스낵바를 표시하기 위해서는 ScaffoldMessenger를 사용할 필요가 있습니다.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Hello world'),
  ),
);

이때 showSnackBar에 SnackBar 위젯을 전달하며, 화면에 표시될 내용을 작성합니다.

SnackBar 위젯의 다음과 같이 다양한 옵션을 사용할 수 있습니다.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Hello world'),
    backgroundColor: Colors.teal,
    duration: Duration(milliseconds: 1000),
    behavior: SnackBarBehavior.floating,
    action: SnackBarAction(
      label: 'Undo',
      textColor: Colors.white,
      onPressed: () => print('Pressed'),
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
      side: BorderSide(
        color: Colors.red,
        width: 2,
      ),
    ),
  ),
);