Flutter의 스낵바(Snackbar) 사용법

Flutter에서 Snackbar 위젯은 간단한 메시지를 사용자에게 잠시 동안 표시하는 데 사용됩니다. 스낵바는 사용자에게 중요한 정보를 전달하거나, 특정 작업이 완료되었음을 알리는 데 유용합니다. 이번 글에서는 Flutter의 Snackbar 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 Snackbar 사용법

Snackbar를 표시하려면 ScaffoldMessenger를 사용하여 현재 화면의 Scaffold에 접근해야 합니다. 가장 간단한 형태의 Snackbar는 다음과 같습니다.

 

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar'),
  ),
);

 

위 코드는 "This is a snackbar"라는 텍스트가 포함된 기본적인 스낵바를 화면에 표시합니다.

2. Snackbar에 액션 추가

스낵바에는 버튼과 같은 액션을 추가할 수 있습니다. 이를 통해 사용자가 스낵바에서 제공하는 기능을 바로 실행할 수 있습니다.

 

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Item deleted'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
        // Perform some action
      },
    ),
  ),
);

 

위 코드는 "Item deleted"라는 메시지와 함께 "Undo" 버튼을 포함한 스낵바를 생성합니다. 사용자가 "Undo" 버튼을 누르면 특정 작업을 수행하도록 설정할 수 있습니다.

 

반응형

 

 

3. 스낵바의 지속 시간 설정

스낵바가 화면에 표시되는 시간을 조정할 수 있습니다. 기본 지속 시간은 4초이며, duration 속성을 사용하여 지속 시간을 변경할 수 있습니다.

 

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar with a custom duration'),
    duration: Duration(seconds: 10),
  ),
);

 

위 코드는 10초 동안 표시되는 스낵바를 생성합니다.

4. 커스텀 스낵바 스타일링

스낵바의 배경색, 텍스트 스타일 등을 커스터마이징할 수 있습니다. backgroundColor와 content 속성의 스타일을 조정하여 스낵바를 꾸밀 수 있습니다.

 

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text(
      'Custom styled snackbar',
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
    backgroundColor: Colors.blue,
  ),
);

 

위 코드는 흰색 텍스트와 파란색 배경을 가진 스낵바를 생성합니다.

5. 스낵바 큐 관리

한 번에 여러 스낵바를 표시하려면 스낵바가 큐에 쌓여 순차적으로 표시됩니다. ScaffoldMessenger를 사용하면 스낵바를 큐에 추가하여 순차적으로 표시할 수 있습니다.

 

void showMultipleSnackbars(BuildContext context) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('First snackbar'),
      duration: Duration(seconds: 2),
    ),
  );
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('Second snackbar'),
      duration: Duration(seconds: 2),
    ),
  );
}

 

위 코드는 두 개의 스낵바를 순차적으로 표시합니다. 첫 번째 스낵바가 사라진 후 두 번째 스낵바가 나타납니다.

6. 기존 스낵바 숨기기

현재 표시되고 있는 스낵바를 수동으로 숨기려면 hideCurrentSnackBar 메서드를 사용할 수 있습니다.

 

ScaffoldMessenger.of(context).hideCurrentSnackBar();

 

위 코드는 현재 표시되고 있는 스낵바를 즉시 숨깁니다.

결론

Snackbar 위젯은 Flutter 애플리케이션에서 사용자에게 간단한 메시지를 전달하는 데 매우 유용한 도구입니다. 기본 스낵바부터 액션 추가, 지속 시간 조정, 스타일링 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. ScaffoldMessenger를 통해 스낵바를 관리하고, 애플리케이션의 인터페이스를 더욱 직관적이고 효율적으로 만들어보세요.