ALIOTHX Developers
ALIOTHXMANAGER
  • 😈DEMO App 설치
  • 크로스플랫폼 개발환경
    • ⚙️Flutter 개발환경
    • 🧑‍💻Flutter 시작하기
    • 📲폰에서 실행
    • 개발가이드
    • 🚀솔루션 설치
    • 🚦코드가이드
      • 명명 규칙및 주석처리
      • 코딩 컨벤션
      • 디렉토리 생성및 관리
      • 페이지 작성
    • 🏭Flutter 아키텍쳐
      • 채널링
      • 웹뷰
        • 웹뷰 설정
        • 웹뷰 연동
      • 보안 (Security)
        • 대칭키 암호알고리즘
        • 비대칭키 암호알고리즘
        • 메시지 다이제스트
        • 탈옥및 루팅 탐지및 차단
        • 앱 위/변조 탐지및 차단
        • 코드 난독화
    • 🖥️관리시스템
    • 🎆협업도구
  • UIUX 컴포넌트
    • UI/UX
      • 테마 적용
      • 화면방향전환
      • 토스트 (Toast)
      • 버튼 (Button)
      • 텍스트 (Text)
      • 탭바 (TabBar)
      • 이미지뷰 (ImageView)
      • 카메라/이미지
      • 페이지 트랜지션
      • 입력필드 (TextField)
      • 체크박스 (CheckBox)
      • 라디오버튼 (RadioButton)
      • 로딩바 (Loading Indicator)
      • 바텀시트 (BottomSheet)
      • 리스트뷰 (ListView)
      • 슬리버 (Sliver)
      • 사운드 (Sound)
      • 애니메이션 (Animation)
      • 위치 및 정렬
      • 커스텀 키보드
      • 카드 (Card)
      • 토글 버튼 (Toggle Button)
      • 다이얼로그 (Dialog)
      • QR코드
      • 페이지뷰 (PageView)
  • Common 컴포넌트
    • 공통모듈
      • 데이터통신과 JSON 파싱
      • 인증 연동
      • 채널링
      • 네비게이션
      • 푸시 메시지
      • SMS 인증
      • 예외처리
  • Security 컴포넌트
    • 보안모듈
      • 메시지 다이제스트
      • 암/복호화
  • Option 컴포넌트
    • 옵션모듈
      • 동영상 플레이어
      • 유튜브 연동
      • 차트
      • SNS 공유
      • 지도
      • 로컬 DB
  • 🎁라이센스및 기술지원
  • 🏢고객사
Powered by GitBook
On this page
  • 토스트 정보메시지 (info)
  • 토스트 오류메시지 (error)
  • 토스트 상세보기 (detail)
  • 토스트 닫기메시지 (close)
  1. UIUX 컴포넌트
  2. UI/UX

토스트 (Toast)

Flutter 앱에서 사용자에게 간단한 메시지나 알림을 효과적으로 전달하기 위해서 Toast 위젯을 사용합니다. Toast 위젯을 사용하면 사용자에게 시각적인 피드백을 제공하고 앱의 사용성을 향상시킬 수 있습니다. 다양한 종류의 Toast 메시지를 활용하여 사용자와의 상호작용을 개선할 수 있습니다.

Previous화면방향전환Next버튼 (Button)

Last updated 1 year ago

토스트 정보메시지 (info)

텍스트로 구성된 가장 간단한 형태의 Toast 메시지로, 이를 사용하여 앱 내에서 간단한 정보를 사용자에게 전달할 수 있습니다.

flutterToast.info(message: '오늘 날씨는 흐림입니다.\n내일은 눈이 온다고 하네요.'); 

위 코드처럼 flutterToast.info() 함수를 호출하여 텍스트 메시지를 화면에 나타냅니다.

토스트 오류메시지 (error)

앱 내에서 오류나 경고 메시지를 사용자에게 전달해야 할 때, 토스트 오류메시지를 사용할 수 있습니다.

flutterToast.error(message: '처리 중입니다.\n잠시 후 다시 시도해주세요.');

위 코드처럼 flutterToast.error() 함수를 호출하여 오류 메시지를 표시합니다.

토스트 상세보기 (detail)

더 많은 정보를 제공하거나 사용자를 다른 화면으로 이동시킬 때, 토스트 상세보기를 사용할 수 있습니다. 이 메시지에는 사용자 액션에 대한 응답을 포함할 수 있습니다.

flutterToast.detail(
      message: '이체가 완료되었습니다.\n상세보기 선택 시 페이지로 이동합니다.',
      action: '바로가기',
      toastDuration: Duration(milliseconds: 2000),
      gravity: ToastGravity.TOP,
      onPressed: () {
        // 사용자가 '바로가기'를 클릭하면 지정된 작업을 수행합니다.
        NetworkUtil.launchURL("https://flutter.dev");
      },
    );

위 코드처럼 flutterToast.detail() 함수를 호출하여 토스트 상세보기를 나타냅니다. 사용자가 '바로가기' 버튼을 누르면 해당 웹 페이지로 이동합니다.

토스트 닫기메시지 (close)

앱에서 잠시 동안 사용자에게 메시지를 표시하고, 자동으로 닫히도록 하려면 토스트 닫기메시지를 사용할 수 있습니다. 이 메시지는 지정된 시간이 지나면 자동으로 사라집니다.

flutterToast.close(
      message: '처리 중입니다.\n잠시 후 다시 시도해주세요.',
      toastDuration: Duration(milliseconds: 2000),
      onDismissed: () {
        // 메시지가 닫힐 때 수행할 작업을 정의합니다.
        flutterToast.removeCustomToast();
      },
    );

위 코드처럼 flutterToast.close() 함수를 호출하면, 메시지를 표시하고 지정된 시간이 지나면 토스트 메시지가 자동으로 닫힙니다.

Flutter의 Toast 위젯을 사용하면 사용자에게 다양한 메시지와 정보를 전달할 수 있습니다. 이러한 간편하고 시각적으로 효과적인 메시지 전달 방식을 통해 사용자 경험을 개선하고 앱의 유용성을 향상시킬 수 있습니다.

위에서 설명한 내용을 참고하여 Flutter 앱에서 Toast 위젯을 사용하여 다양한 메시지를 표시하는 방법을 익혀보세요. Toast 메시지는 사용자와의 상호작용을 향상시키고 중요한 정보를 전달하는 데 유용한 도구입니다.

Page cover image