Show Toast Message in Flutter

Toast messages are often used to show flash messages to users. Which basically provide them details about current actions related messages or make them aware about current events.

In this article we are going to see how to display toast with a flutter.

Open your pubspec.yaml file and add fluttertoast:^7.0.1 dependency under “dependencies”.

dependencies:
  fluttertoast: ^7.0.1

By using this dependency we can create toast from below code.

Fluttertoast.showToast(
   msg: 'This is Toast',
   toastLength: Toast.LENGTH_SHORT,
   gravity: ToastGravity.CENTER,
   backgroundColor: Colors.grey,
   textColor: Colors.white
   );

You will be required to import the following line to user toast in your main.dart file.

import 'package:fluttertoast/fluttertoast.dart';

You can update the toast message, display length, position, background color, text color, font size inside showToast.

Replace your existing code of main.dart file with the following.

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

void main() => runApp(
     MaterialApp(
       debugShowCheckedModeBanner: false,
       home: MyApp(),
     ),
   );

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       backgroundColor: Colors.teal,
       title: Text('Flutter Toast'),
     ),
     body: SafeArea(
       child: Container(
         child: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Container( //THIS CONTAINER USED TO SET WIDTH TO RAISED BUTTON
                 width: 150,
                 child: new RaisedButton(
                   child: const Text('Center Toast'),
                   onPressed: () => centerToast(context),
                 ),
               ),
               Container( //THIS CONTAINER USED TO SET WIDTH TO RAISED BUTTON
                 width: 150,
                 child: new RaisedButton(
                   child: const Text('Bottom Toast'),
                   onPressed: () => bottomToast(context),
                 ),
               ),
               Container( //THIS CONTAINER USED TO SET WIDTH TO RAISED BUTTON
                 width: 150,
                 child: new RaisedButton(
                   child: const Text('Color Toast'),
                   onPressed: () => coloredToast(context),
                 ),
               ),
               Container( //THIS CONTAINER USED TO SET WIDTH TO RAISED BUTTON
                 width: 150,
                 child: new RaisedButton(
                   child: const Text('Top Toast'),
                   onPressed: () => topToast(context),
                 ),
               ),
             ],
           ),
         ),
       ),
     ),
   );
 }

 centerToast(BuildContext context) {
   Fluttertoast.showToast(
       msg: 'This is center Toast',
       toastLength: Toast.LENGTH_SHORT,
       gravity: ToastGravity.CENTER,
       backgroundColor: Colors.grey,
       textColor: Colors.white);
 }

 coloredToast(BuildContext context) {
   Fluttertoast.showToast(
       msg: 'This is color Toast',
       toastLength: Toast.LENGTH_SHORT,
       gravity: ToastGravity.BOTTOM,
       backgroundColor: Colors.green,
       textColor: Colors.white);
 }

 topToast(BuildContext context) {
   Fluttertoast.showToast(
       msg: 'This is top Toast',
       toastLength: Toast.LENGTH_SHORT,
       gravity: ToastGravity.TOP,
       backgroundColor: Colors.green,
       textColor: Colors.white);
 }

 bottomToast(BuildContext context) {
   Fluttertoast.showToast(
       msg: 'This is bottom Toast',
       toastLength: Toast.LENGTH_SHORT,
       gravity: ToastGravity.BOTTOM,
       backgroundColor: Colors.grey,
       textColor: Colors.white);
 }
}

Conclusion: This article is published to help with show different toast in flutter.

Thank you for reading this article. if you need any help then you can contact us on info@tagnism.com

Leave a Reply Cancel reply