Flutter에서 스낵바(SnackBar)와 토스트(Toast) 메시지 사용하기

Flutter에서 스낵바(SnackBar)와 토스트(Toast) 메시지 사용하기

 

이번 시간에는 스낵바(SnackBar) 와 토스트(Toast) 메시지에 대해 학습.

이 두 가지는 사용자에게 간단한 알림이나 상태 변화를 알려줄 때 자주 사용

ScaffoldMessenger로 스낵바 만들기

 

ScaffoldMessenger는 가장 가까운 Scaffold를 찾아서 메시지를 표시하는 역할을 한다.

기존의 Scaffold.of(context) 방식은 deprecated 되었기 때문에

ScaffoldMessenger.of(context) 로 대체해서 사용해야 한다.

 

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme:
          ThemeData(primarySwatch: Colors.green // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
              ),
      home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snack Bar'),
        centerTitle: true,
      ),
      body: MySnackBar(),
    );
  }
}

class MySnackBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: ElevatedButton(
      child: Text('Show me'),
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          // 스캐폴드메신저 만들기
          // 가장 가까운 스캐폴드 찾아서 반환해
          SnackBar(
            // 스낵바
            content: Text(
              'Hello',
              textAlign: TextAlign.center, // 중앙정렬
              style: TextStyle(color: Colors.white), // 텍스트
            ),
            backgroundColor: Colors.teal,
            duration: Duration(seconds: 1),

          ),
        );
      },
    ));
  }
}

ScaffoldMessenger 결과

 

 

 

토스트 메시지

 

토스트 메시지는 앱 화면 위에 간단히 뜨는 알림창으로, 안드로이드에서 자주 사용하는 형태

Flutter에서는 fluttertoast 패키지를 설치해야 사용할 수 있음.

 

1. pubspec.yaml 쪽에서 의존성 연결

fluttertoast: ^8.0.8 를 넣는다.

 

에러가 발생한다면

• 1. 우선 pubspec.yaml쪽에 인덱스를 잘 맞춰서 적었는지 확인한다.
• 2. 공식 사이트를 가서 버전이 맞는지 확인한다.
• 3. 앱을 완전히 껐다가 다시 킨다. 

[verbose-2:ui_dart_state.cc(199)] unhandled exception: missingpluginexception
(no implementation found for method showtoast on channel ponnamkarthik/fluttertoast) 
#0 methodchannel._invokemethod (package:flutter/src/services/platform_channel.dart:156:7) <asynchronous suspension> 
#1 fluttertoast.showtoast (package:fluttertoast/fluttertoast.dart:100:17) <asynchronous suspension>

 

 

https://pub.dev/packages/fluttertoast

fluttertoast | Flutter Package

 

 

샘플 코드

구현 부분은 어려운게 없음.

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme:
          ThemeData(primarySwatch: Colors.green // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
              ),
      home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toast Bar'),
        centerTitle: true,
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            print('TextButton is clicked');
            flutterToast(); // 함수 호출
          },
          child: Text('Toast'),
          //color: Colors.blue
        ),
      ),
    );
  }
}

void flutterToast() {
  Fluttertoast.showToast(
      msg: "This is Center Short Toast", // 메시지 내용
      toastLength: Toast.LENGTH_SHORT, // 메시지 시간 - 안드로이드
      gravity: ToastGravity.BOTTOM, // 메시지 위치
      timeInSecForIosWeb: 1, // 메시지 시간 - iOS 및 웹
      backgroundColor: Colors.red, // 배경
      textColor: Colors.white, // 글자
      fontSize: 16.0); // 글자 크기
}