Flutter Toast 커스텀 feat.웹 (+ ScaffoldMessenger)

Toast 띄우는 것은 안드로이드, iOS, 웹 등 많은 곳에서 사용이 된다. Flutter에서 Toast 띄우는 방법도 아주 간단하다.

하지만 나는 커스텀하는 방법을 찾지 못해 애를 많이 먹었었다.

 

fluttertoast의 공식문서는 여기서 확인할 수 있다.

https://pub.dev/packages/fluttertoast

fluttertoast | Flutter Package

 

일단 pubspec.yaml에 shared_preference를 추가하고 pub get을 해줘야 한다.

dependencies:
  fluttertoast: ^8.0.8

 

이제 toast를 띄울 준비는 끝났다.

Fluttertoast.showToast(
              textColor: Colors.black,
              webBgColor: "linear-gradient(to right, #E0E0E0, #CECECE)",
              msg: "success",
              toastLength: Toast.LENGTH_SHORT,
              gravity: ToastGravity.CENTER,
              timeInSecForIosWeb: 3,
);

나는 이런식으로 사용했다. 여기서 앱을 기준으로 배경 커스텀 할 때에는 backgroundColor로 아무 문제없이 커스텀이 가능하다.

 

하지만, 웹에서 커스텀을 진행할 경우 이게 안되서 한참 헤맸었다. 웹에서 배경 색깔을 변경해주려면

WebBgColor에 저 그대로 쓴다 생각하면 된다. linear-gradient가 그라데이션을 의미하긴 하지만 큰 차이는 없다. 

 

to right는 오른쪽 방향으로 색깔이 변한다는 것으로 #E0E0E0이 왼쪽색, #CECECE가 오른쪽색으로 나타났다.

여기서 저 두 부분만 원하는대로 변경하면 색이 웹에서도 잘 바뀌는 것을 확인할 수 있다!

 

위에 코드대로 커스텀한 결과물은 아래 사진과 같다.

 

 

---

Toast에 대해서만 설명하기엔 짧은 것 같아 ScaffoldMessenger에 대해서도 간단히 포스팅을 해보자면

사실 이것도 아주 간단하다. 딱 한줄이면 된다. 심지어 라이브러리도 전혀 필요가 없다.

ScaffoldMessenger.of(context).showSnackBar(SnackBar(
         content: Text("Complete")));

참고로 scaffoldMessenger가 뭔지 모르는 사람을 위해 사진을 첨부했다. 아래 사진과 같이 하단에 짧게 올라왔다 내려가는 알림바인데 아마 실행해보면 감이 올 것이다.

 

 

이렇게 Flutter에서 자주 사용하는 알림인 Toast와 ScaffoldMessenger에 대해 포스팅을 해보았다.