알림 띄우기

AlertDialog (다이얼로그)

• 사용자에게 상황을 알려주는 대화 상자
• 주로 사용하는 속성
  • List<Widget>? actions
    • 대화 상자 하단에 표시될 작업 위젯 목록
    • 주로 취소나 확인 기능을 하는 버튼을 배치한다.
  • EdgeInsetsGeometry? actionsPadding
    • action 주위의 padding
  • MainAxisAlignment? actionsAlignment
    • Row.mainAxisAlignment 와 동일한 규칙에 따라 내부 요소를 배치한다.
  • AlignmentGeometry? alignment
    • 화면 기준으로 대화 상자를 배치할 위치
  • Color? backgroundColor
    • 배경색
  • EdgeInsetsGeometry? buttonPadding
    • action 내부의 각 요소들에 대한 여백
  • Widget? title
    • 제목으로 사용할 위젯
  • EdgeInsetsGeometry? titlePadding
    • title 주변의 여백
  • TextStyle? titleTextStyle
    • title 내부에 있는 Text 계열 위젯에 대한 스타일
  • Widget? content
    • 내용으로 사용할 위젯
  • EdgeInsetsGeometry? contentPadding
    • content 주변의 여백
  • TextStyle? contentTextStyle
    • content 내부에 있는 Text 계열 위젯에 대한 스타일
  • double? elevation
    • 상위 AlertDialog를 기준으로 해당 AlertDialog를 배치할 z 좌표
  • Color? shadowColor
    • elevation에 대한 그림자 색상
  • Color? surfaceTintColor
    • elevation을 나타내기 위한 color 위에 오버레이될 색상
  • Widget? icon
    • 대화 상자 상단에 표시할 아이콘으로 사용할 위젯
  • EdgeInsetsGeometry? iconPadding
    • icon 주변의 여백
  • Color? iconColor
    • icon의 색상
  • EdgeInsets insetPadding
    • 대화 상자 외부의 MediaQueryData.viewInsets 에 추가된 여백
    • 화면 가장자리와 대화 상자 사이의 최소 공간을 의미한다.
    • 기본 값 : _defaultInsetPadding
  • ShapeBorder? shape
    • 대화 상자의 테두리 모양
  • bool scrollable
    • 스크롤 가능 여부
    • 기본 값 : false
• 참고

TextButton(
    onPressed: () => showDialog<String>(
    context: context,
    builder: (BuildContext context) => AlertDialog(
        title: const Text('AlertDialog Title'),
        content: const Text('AlertDialog description'),
        actions: <Widget>[
        TextButton(
            onPressed: () => Navigator.pop(context, 'Cancel'),
            child: const Text('Cancel'),
        ),
        TextButton(
            onPressed: () => Navigator.pop(context, 'OK'),
            child: const Text('OK'),
        ),
        ],
    ),
    ),
    child: const Text('Show Dialog'),
)

SimpleDialog (다이얼로그)

• 사용자에게 선택지를 제공하는 대화 상자
• 주로 사용하는 속성
  • AlignmentGeometry? alignment
    • 화면 기준으로 대화 상자를 배치할 위치
  • Widget? title
    • 제목으로 사용할 위젯
  • EdgeInsetsGeometry titlePadding
    • title 주변의 여백
    • 기본 값 : const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0)
  • TextStyle? titleTextStyle
    • title 내부에 있는 Text 계열 위젯에 대한 스타일
  • List? children
    • 내부에 배치할 위젯 목록
    • AlertDialog의 content에 해당한다.
  • EdgeInsetsGeometry contentPadding
    • content 주변의 여백
    • 기본 값 : const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0)
  • Color? backgroundColor
    • 배경색
  • double? elevation
    • 상위 SimpleDialog를 기준으로 해당 SimpleDialog를 배치할 z 좌표
  • Color? shadowColor
    • elevation에 대한 그림자 색상
  • Color? surfaceTintColor
    • elevation을 나타내기 위한 color 위에 오버레이될 색상
  • EdgeInsets insetPadding
    • 대화 상자 외부의 MediaQueryData.viewInsets 에 추가된 여백
    • 화면 가장자리와 대화 상자 사이의 최소 공간을 의미한다.
    • 기본 값 : _defaultInsetPadding
  • ShapeBorder? shape
    • 대화 상자의 테두리 모양
• 참고

TextButton(
    onPressed: () async {
        switch (
            await showDialog<Department>(
                context: context,
                builder: (BuildContext context) {
                    return SimpleDialog(
                        title: const Text('Select assignment'),
                        children: <Widget>[
                            SimpleDialogOption(
                                onPressed: () { Navigator.pop(context, Department.treasury); },
                                child: const Text('Treasury department'),
                            ),
                            SimpleDialogOption(
                                onPressed: () { Navigator.pop(context, Department.state); },
                                child: const Text('State department'),
                            ),
                        ],
                    );
                }
            )
        ) {
        case Department.treasury:
            // ...
        break;
        case Department.state:
            // ...
        break;
        case null:
            // dialog dismissed
        break;
        }
    },
    child: const Text('Show Dialog'),
)

SnackBar

• 화면 하단에 간략하게 표시되는 선택적 작업이 포함된 간단한 메시지를 표시한다.
• 주로 사용하는 속성
  • Widget content
    • 내용으로 사용할 위젯
    • 필수
  • Color? backgroundColor
    • 배경색
  • double? elevation
    • 상위 SnackBar를 기준으로 해당 SnackBar를 배치할 z 좌표
  • EdgeInsetsGeometry? margin
    • SnackBar 외부의 여백
  • EdgeInsetsGeometry? padding
    • SnackBar 내부의 여백
  • double? width
    • SnackBar의 너비
  • ShapeBorder? shape
    • SnackBar의 모양
  • SnackBarBehavior? behavior
    • SnackBar의 동작과 위치
    • 종류
      • SnackBarBehavior.fixed
      • SnackBarBehavior.floating
  • SnackBarAction? action
    • SnackBar에 추가할 기능
  • double? actionOverflowThreshold
  • bool? showCloseIcon
    • 닫기 아이콘 노출 여부
  • Color? closeIconColor
    • 닫기 아이콘의 색상
  • Duration duration
    • SnackBar가 유지되는 시간
    • 기본 값 : _snackBarDisplayDuration
  • void Function()? onVisible
    • SnackBar가 Scaffold 내에서 처음으로 표시될 때 동작할 기능
  • DismissDirection dismissDirection
    • 기본 값 : DismissDirection.down
• 참고

ElevatedButton(
    child: const Text('Show Snackbar'),
    onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
                content: const Text('Awesome Snackbar!'),
                action: SnackBarAction(
                    label: 'Action',
                    onPressed: () {
                        // Code to execute.
                    },
                ),
            ),
        );
    },
)