[Flutter] 토스트 팝업 메시지 (fluttertoast v8)

🎁 fluttertoast

토스트 팝업 메시지를 보여주는 간단한 라이브러리이다.

 

 

😶 설치

pubspec.yaml 파일에 fluttertoast 라이브러리를 추가해 준 뒤 pub get 버튼을 누른다. (현재 시각 최신 버전 v8)

dependencies:
  fluttertoast: ^8.2.1

 

 

😶 사용법

아주 간단하게 토스트 팝업을 띄우는 것은 Fluttertoast.showToast() 로 띄워주면 된다.

 

import 'package:fluttertoast/fluttertoast.dart';

Fluttertoast.showToast(
  msg: "토스트 팝업 메시지",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.TOP,
  backgroundColor: Colors.brown.withOpacity(0.7),
  textColor: Colors.white,
  fontSize: 13.0,
);

 

 

😶 커스텀 토스트 팝업

토스트 팝업을 직접 꾸미고 싶다면 FToast 클래스를 직접 이용하면 된다. FToast 의 showToast() 의 child 로 직접 디자인한 위젯을 넣고 toastDuration 으로 팝업 보여주는 시간을 입력한다. positionedToastBuilder 인자로 화면 원하는 위치에 토스트 팝업을 배치할 수 있다.

import 'package:fluttertoast/fluttertoast.dart';

_showToast(BuildContext context) {
    FToast fToast = FToast().init(context);
    
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25.0),
        color: Colors.greenAccent,
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.check),
          SizedBox(
            width: 12.0,
          ),
          Text("This is a Custom Toast"),
        ],
      ),
    );
    
    /* 기본 토스트 팝업
    fToast.showToast(
        child: toast,
        gravity: ToastGravity.BOTTOM,
        toastDuration: Duration(seconds: 2),
    );
    */
    
    // 커스텀 배치 토스트 팝업
    fToast.showToast(
        child: toast,
        toastDuration: Duration(seconds: 2),
        positionedToastBuilder: (context, child) {
          return Positioned(
            child: child,
            top: 50.0,
          );
        });
  }

 

 

 

 

 

 

 

fluttertoast | Flutter Package