SncakBar란?

Flutter에서 Snackbar는 잠시 동안 화면 하단에 메시지를 표시하는 간단한 방법입니다. 주로 사용자에게 피드백을 제공하거나 잠시 동안 정보를 보여줄 때 사용됩니다. 이번 포스트에서는 Snackbar를 사용하는 방법에 대해 알아보겠습니다.

1. 기본 Snackbar 사용법

가장 간단한 방법으로 Snackbar를 사용하는 방법은 ScaffoldMessenger를 사용하는 것입니다. 예를 들어, 버튼을 눌렀을 때 Snackbar를 표시하는 방법을 보여드리겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Snackbar Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Snackbar를 표시하기 위해 ScaffoldMessenger를 사용
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Hello, Snackbar!'),
                duration: Duration(seconds: 3),
              ),
            );
          },
          child: Text('Show Snackbar'),
        ),
      ),
    );
  }
}

위 코드를 실행하면, 버튼을 눌렀을 때 "Hello, Snackbar!" 메시지가 3초 동안 화면 하단에 표시됩니다.

2. Snackbar 커스터마이징

Snackbar의 배경색, 액션 버튼 등을 커스터마이징 할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Snackbar Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('This is a custom Snackbar!'),
                backgroundColor: Colors.blueAccent,
                duration: Duration(seconds: 5),
                action: SnackBarAction(
                  label: 'Undo',
                  textColor: Colors.white,
                  onPressed: () {
                    // Snackbar 액션 눌렀을 때 실행되는 코드
                    print('Undo pressed');
                  },
                ),
              ),
            );
          },
          child: Text('Show Custom Snackbar'),
        ),
      ),
    );
  }
}

위 코드에서는 커스텀 메시지, 배경색, 액션 버튼을 포함한 Snackbar를 5초 동안 표시합니다.

3. ScaffoldMessenger를 사용한 Snackbar

Flutter 2.0 이후로는 Scaffold.of(context) 대신 ScaffoldMessenger를 사용하는 것이 권장됩니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Snackbar Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final snackBar = SnackBar(
              content: Text('Hello, ScaffoldMessenger!'),
              duration: Duration(seconds: 3),
            );

            // ScaffoldMessenger를 사용하여 Snackbar 표시
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
          child: Text('Show Snackbar with ScaffoldMessenger'),
        ),
      ),
    );
  }
}

위 코드를 통해 ScaffoldMessenger를 사용하여 Snackbar를 표시하는 방법을 알 수 있습니다.

마무리
이 포스트에서는 Flutter에서 Snackbar를 사용하는 방법에 대해 알아보았습니다. 기본적인 사용법부터 커스터마이징, 그리고 새로운 ScaffoldMessenger를 사용하는 방법까지 다양한 예제를 살펴보았습니다. 필요에 따라 메시지의 내용, 스타일, 액션 등을 커스터마이징하여 사용하시길 바랍니다.