Posted in Dart Flutter

Flutter – How to show Toast Message on Button Click

Flutter – How to show Toast Message on Button Click Posted on May 22, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Toast is the best way to show the message in Flutter because it gets dismissed automatically, it doesn’t affect any other UI components and looks app interactive. See the example below and learn to show Toast message when a button is pressed or on any action.

toast message in flutter

To show Toast message, you need to add fluttertoast Flutter package in dependency by adding the following line in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  fluttertoast: ^4.0.0

You can show toast by using following code:

Fluttertoast.showToast(
   msg: message, //message to show toast
   toastLength: Toast.LENGTH_LONG, //duration for message to show
   gravity: ToastGravity.CENTER, //where you want to show, top, bottom
   timeInSecForIosWeb: 1, //for iOS only
   //backgroundColor: Colors.red, //background Color for message
   textColor: Colors.white, //message text color
   fontSize: 16.0 //message font size
);

Cancel all Toast using:

Fluttertoast.cancel();

Show toast on Button Click (Full Code):

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

class ShowToast extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar( 
         title: Text("Show Toast on Flutter"),
         backgroundColor: Colors.redAccent,
       ),
       body: Container( 
           height: 150,
           alignment: Alignment.center, //align content to center
           padding: EdgeInsets.all(20),
           child:RaisedButton(
             onPressed: (){
                showToastMessage("Show Toast Message on Flutter");
             },
             colorBrightness: Brightness.dark, //background color is dark
             color: Colors.redAccent, //set background color is redAccent
             child: Text("Show Toast Message"),
           ),
       )
    );
  }

  //create this function, so that, you needn't to configure toast every time
  void showToastMessage(String message){
     Fluttertoast.showToast(
        msg: message, //message to show toast
        toastLength: Toast.LENGTH_LONG, //duration for message to show
        gravity: ToastGravity.CENTER, //where you want to show, top, bottom
        timeInSecForIosWeb: 1, //for iOS only
        //backgroundColor: Colors.red, //background Color for message
        textColor: Colors.white, //message text color
        fontSize: 16.0 //message font size
    );
  }

}

In this way, you can show toast message with button click and make your app more interactive.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *