Flutter Toast 메시지

Flutter 에서 Toast 메시지를 띄우는 걸 하는 방법이다.

 

https://pub.dev/packages/fluttertoast/install 를 보고 순서대로 진행한다.

현재 실행중인 Project 에서 터미널 창을 열어서 flutter pub add fluttertoast 를 입력한다.

아래 파일에 자동으로 추가된 것을 확인할 수 있다.

Pub get 을 눌러준다. Android Native 앱 Sync Now 와 같은 기능으로 보인다.

여기까지 해주고 예제 소스코드로 테스트하는데 동작이 제대로 안된다. 흐미ㅜㅜ

Hot Reload 기능이 제대로 동작되지 않는 거 같더라.

그래서 완전 종료한 후 버튼을 눌렀더니 제대로 동작되는 걸 확인할 수 있었다.

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'listview_demo1.dart';
 
class CallsfloatBtn extends StatefulWidget {
  const CallsfloatBtn({Key? key}) : super(key: key);
 
  @override
  _CallsfloatBtnState createState() => _CallsfloatBtnState();
}
 
class _CallsfloatBtnState extends State<CallsfloatBtn> {
  int _counter = 0;
  late FToast fToast;
 
  @override
  void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 중앙정렬
          children: <Widget>[
            Text(
              '당신은 버튼을 눌렀어요 :',
              softWrap: false, // 텍스트가 영역을 넘어갈 경우 줄바꿈 여부
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '$_counter 번',
              style: TextStyle(fontSize: 25),
            ),
            ElevatedButton(
              child: Text('화면 이동'),
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => ListView_Demo1()));
              },
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.teal),
                  padding: MaterialStateProperty.all(EdgeInsets.all(15)),
                  textStyle:
                      MaterialStateProperty.all(TextStyle(fontSize: 14))),
            ),
            ElevatedButton(
              child: Text("Show Toast"),
              onPressed: () {
                showToast();
              },
            ),
            ElevatedButton(
              child: Text("Show Custom Toast"),
              onPressed: () {
                showCustomToast();
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
 
  void showToast() {
    Fluttertoast.showToast(
        msg: "기본 토스트 메시지입니다!",
        toastLength: Toast.LENGTH_LONG,
        fontSize: 14,
        backgroundColor: Colors.green
    );
  }
 
  showCustomToast() {
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25.0),
        color: Colors.greenAccent,
      ),
      child: Text("This is a Custom Toast"),
    );
 
    fToast.showToast(
      child: toast,
      toastDuration: Duration(seconds: 3),
    );
  }
  
}
 

 

참고자료

https://codesinsider.com/flutter-toast-message-example-tutorial/

Flutter Toast Message Example Tutorial – CODES INSIDER

OKToast 는 기회되면 나중에 한번 테스트 해보고자 한다.

https://github.com/OpenFlutter/flutter_oktoast

GitHub - OpenFlutter/flutter_oktoast: a pure flutter toast library