SnackBar 구현하기: 사용자가 놓치지 않을 메시지를 전달하는 방법

Flutter에서 SnackBar는 사용자에게 빠르고 간단한 피드백을 제공하는 데 매우 유용한 도구입니다. 앱 내에서 특정 작업이 완료되었을 때 이를 사용자에게 알리고, 경우에 따라 '실행 취소(Undo)' 같은 추가적인 액션도 제공할 수 있습니다. 이 글에서는 Flutter에서 SnackBar를 구현하고 사용자 경험을 높이는 방법을 단계별로 설명하겠습니다.

Scaffold로 기본 구조 설정하기

SnackBar는 보통 Scaffold 위젯 내에서 표시됩니다. Scaffold는 Flutter의 기본 화면 레이아웃을 제공하는 위젯으로, 상단에 AppBar를 포함하고 하단에 SnackBar 같은 요소를 배치할 수 있습니다. 우선, Scaffold를 설정하는 기본 구조는 아래와 같습니다:

return MaterialApp(
  title: 'SnackBar Demo',
  home: Scaffold(
    appBar: AppBar(
      title: const Text('SnackBar Demo'),
    ),
    body: const SnackBarPage(),
  ),
);

SnackBar 표시하기

SnackBar를 표시하려면 먼저 SnackBar 객체를 생성한 후, ScaffoldMessenger를 사용하여 이를 화면에 띄워야 합니다. 아래는 간단한 SnackBar를 화면에 표시하는 코드입니다:

const snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
);

// ScaffoldMessenger를 사용해 SnackBar를 화면에 띄우기
ScaffoldMessenger.of(context).showSnackBar(snackBar);

이 코드에서는 "Yay! A SnackBar!"라는 텍스트가 포함된 SnackBar를 생성하고, ScaffoldMessenger를 통해 화면 하단에 표시합니다. 이 기능은 특정 이벤트가 발생했을 때 사용자에게 간단한 메시지를 전달하는 데 매우 유용합니다.

SnackBar에 액션 추가하기

때로는 SnackBar에 추가적인 액션을 제공하고 싶을 수 있습니다. 예를 들어, 사용자가 메시지를 삭제했을 때 이를 실행 취소할 수 있는 옵션을 제공하려면 SnackBarAction을 사용하면 됩니다. 아래는 'Undo' 액션을 제공하는 SnackBar의 예시입니다:

final snackBar = SnackBar(
  content: const Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // 실행 취소 기능 구현
    },
  ),
);

이 코드에서는 'Undo' 버튼이 추가된 SnackBar가 화면에 표시되며, 사용자가 이 버튼을 누르면 onPressed 콜백 함수 내의 코드가 실행됩니다. 이를 통해 사용자는 작업을 실행 취소할 수 있는 기회를 얻게 됩니다.

SnackBar 활용 팁

• 적절한 타이밍: SnackBar는 화면에 짧은 시간 동안 표시되므로, 사용자가 알아차리기 쉬운 타이밍에 적절히 표시하는 것이 중요합니다.
• 애니메이션: 기본적으로 SnackBar는 하단에서 위로 슬라이드되며 나타나고 사라지는데, 이러한 애니메이션은 사용자에게 자연스러운 피드백을 제공합니다.
• 사용자 경험 강화: 추가적인 SnackBarAction을 제공해 사용자가 작업을 실수로 수행했을 때 이를 쉽게 되돌릴 수 있는 경험을 제공하세요.

---

결론

SnackBar는 사용자에게 빠른 피드백을 제공하는 데 매우 유용한 Flutter 위젯입니다. 간단한 텍스트 메시지를 화면 하단에 표시하고, 필요한 경우 액션 버튼을 통해 더 많은 기능을 제공할 수 있습니다. ScaffoldMessenger를 통해 SnackBar를 효율적으로 관리하고 사용자에게 더 나은 인터랙션 경험을 제공할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(const SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  const SnackBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Demo'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: const Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );

          // Find the ScaffoldMessenger in the widget tree
          // and use it to show a SnackBar.
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show SnackBar'),
      ),
    );
  }
}