[Flutter] SnackBar 위젯 사용법과 응용하기

 

이번 포스팅에서는 알림, 경고 또는 로딩창으로 사용할 수 있는 SnackBar를 다룹니다!

 

---

SnackBar

예제 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final scaffoldKey = GlobalKey<ScaffoldState>();
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'SnackBar',
      home: Scaffold(
          key: scaffoldKey,
          appBar: AppBar(
            title: Text('SnackBar'),
            centerTitle: true,
          ),
          body: Center(
            child: Container(
              color: Colors.blueAccent,
              child: FlatButton(
                onPressed: () {
                  scaffoldKey.currentState.showSnackBar(basicSnackBar());
                  // scaffoldKey.currentState.showSnackBar(alertSnackBar());
                  // scaffoldKey.currentState.showSnackBar(lodingSnackBar());
                },
                child: Text(
                  "클릭",
                  style: TextStyle(fontSize: 25, color: Colors.white),
                ),
              ),
            ),
          )),
    );
  }

  SnackBar basicSnackBar() {
    return SnackBar(
      duration: Duration(seconds: 2),
      content: Text("안녕하세요! 반갑습니다!"),
      action: SnackBarAction(
        label: "Done",
        textColor: Colors.white,
        onPressed: () {},
      ),
    );
  }

  SnackBar alertSnackBar() {
    return SnackBar(
      backgroundColor: Colors.red[400],
      duration: Duration(seconds: 2),
      content: Text("에러가 발생했습니다"),
      action: SnackBarAction(
        label: "Done",
        textColor: Colors.white,
        onPressed: () {},
      ),
    );
  }

  SnackBar lodingSnackBar() {
    return SnackBar(
      duration: Duration(seconds: 2),
      content: Row(
        children: [
          Text("SnackBar 공부 중"),
          Expanded(child: Container(height: 0)),
          CircularProgressIndicator(),
        ],
      ),
    );
  }
}

 

SnackBar를 사용하기 위해선 Scaffold의 GlobalKey를 변수로 선언해야합니다.

그리고 발급받은 key를 사용하여 SnackBar를 띄울 수 있습니다!

( 아래 코드 처럼 )

 

// GlobalKey 생성
final scaffoldKey = GlobalKey<ScaffoldState>();

Scaffold( 
    .
    .
    .
    // Key 등록
    key: scaffoldKey,
    .
    .
    .
    body: FlatButton(
            onPressed: () {
                // SnackBar 출력 지정
                scaffoldKey.currentState.showSnackBar(snackbar)
            }
          ) 
)

 

이번 예제 코드에선 SnackBar를 알림, 경고, 로딩 3가지의 경우로 응용합니다.

 

 

---

 

알림

SnackBar basicSnackBar() {
    return SnackBar(
      // SnackBar가 출력되는 시간
      duration: Duration(seconds: 2),
      
      // SnackBar의 내용
      content: Text("안녕하세요! 반갑습니다!"),
      
      // SnackBar의 오른쪽에 배치될 위젯
      action: SnackBarAction(
        label: "Done",
        textColor: Colors.white,
        onPressed: () {},
      ),
    );
  }

 

 

 

---

 

경고

SnackBar alertSnackBar() {
    return SnackBar(
    
      // SnackBar의 배경색
      backgroundColor: Colors.red[400],
      
      duration: Duration(seconds: 2),
      content: Text("에러가 발생했습니다"),
      action: SnackBarAction(
        label: "Done",
        textColor: Colors.white,
        onPressed: () {},
      ),
    );
  }

 

---

 

로딩

SnackBar lodingSnackBar() {
    return SnackBar(
      duration: Duration(seconds: 2),
      content: Row(
        children: [
          Text("SnackBar 공부 중"),
          
          // 남은 Row의 공간을 꽉 채움
          // CircularProgressIndicator를 오른쪽 끝으로 보내기 위함
          Expanded(child: Container(height: 0)),
          
          // 로딩표시
          CircularProgressIndicator(),
        ],
      ),
    );
  }

 

각각 필요한 상황에 맞게 디자인해서 사용하시면 매우매우 좋습니다.

 

 

더 자세히 알고싶다면?!

https://flutter.dev/docs/cookbook/design/snackbars

Display a snackbar