Flutter Toast 사용법

 

 

오늘은 Flutter에서 제공하는 FlutterToast를 다뤄보겠다.

 

 

 

 

Android Studio로 앱을 만들어봤다면 알곘지만 Android에서도 ToastMessage가 나온다.

 

똑같이 플러터도 ToastMessage를 지원하고 있다.

 

 

 

ToastMessage는 어디에 사용될까?

 

예로, 사용자의 잘못된 행동이나, 오류가 발생했을 때, 안내문구를 띄워야 한다.

 

그럴 때 fluttertoast를 이용하면 쉽게 안내문구를 띄울 수 있다.

 

 

 

 

 

 

 

 

1. 사전준비

 

pubspec.yaml에 들어가면 내용이 잡다하게 많다.

그 중 dependencies:를 찾아 보자.

 

 

따로 건드린 게 없다면 20번째 줄 쯤에 보일 것이다.

 

...
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  fluttertoast: ^8.1.3 # 추가해야 함
...

 

dependencies 항목 내 fluttertoast가 추가된 게 보이는가?

 

최근 flutter를 설치했다면 저 버전에 맞게 그대로 입력하면 된다.

 

 

 

Android studio 사용 시, 상단에 pub get 이라고 나오는데, 클릭하면 적용된다.

 

VS Code는 저장 시, 자동으로 pub get 처리 된다.

 

 

 

라이브러리를 추가하고 난 뒤, 반드시 pub get을 누를 것!!

 

 

 

오류가 발생했다면?

1. 버전 문제

 

버전이 일치하지 않아서일 수 있다.

 

오류 내용에 버전 관련으로 언급된 게 없는가 확인해보자.

 

 

 

 

2. 잘못 기입

 

잘못 입력했을 수 있다.

 

혹시 dependencies 내 flutter쪽에 입력하진 않았는가?

 

아니면 flutter 항목에 입력하진 않았는가?

 

 

추가 패키지 설치는 dependencies에 기입해야 한다.

 

 

 

 

 

 

 

 

 

2. 사용하기

 

아주 간단한 예제를 하나 보여주겠다.

사용법은 매우 간단하다.

 

 

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class ToastPractice extends StatelessWidget {
  const ToastPractice({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: (){
            Fluttertoast.showToast(msg: "클릭했습니다.");
          },
          child: Text("버튼"),
        ),
      )
    );
  }
}

 

 

FlutterToast는 내장 라이브러리가 아니다.

 

때문에, 사용할 파일에 import 해야 한다.

 

 

사용법은 매우 간단하다 Fluttertoast.showToast()는 msg 파라미터를 받는다.

 

문자열을 입력하거나,  문자열이 저장된 변수를 입력하면 된다.

 

 

 

import 'package:flutter/material.dart';
import 'package:flutter_practice/ToastPractice.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ToastPractice(),
    );
  }
}

 

main.dart에 ToastPractice 파일을 만들었으니, 불러오고 home에서 호출하면 된다.

 

 

 

이제 제대로 실행되는가 테스트 해보자.

 

 

크롬에서 실행한 모습이다.

 

우측 하단에 '클릭했습니다.' 라는 내용이 제대로 나오고 있다.

 

 

 

 

모바일에서도 잘 나온다.

 

 

 

 

 

 

 

 

3. 마무리

 

지금까지 Fluttertoast를 다루는 간단한 예제를 살펴봤다.

 

 

사용하기 매우 쉽다. 그저 라이브러리 추가하고 불러오고 호출만 하면 된다.

 

 

이 예제를 따라했으면 안내 문구 띄우는 것은 그리 어렵지 않을 것이다.