Flutter Toast Message bot library
Flutter Toast Message bot library

Hi Guys, welcome to Proto Coders Point , In this Flutter Tutorial we will discuss and Implement  Flutter Toast Message using Bot Toast Library.

Learn more about this library from Official Site

What is Toast Message?

Some TImes Toast Messages are also called as Toast Notification.

It’s a small message that pop up at the bottom of the device screen and immediately disappears on it’s own after a delay of few seconds,

This are mostly used to show a feedback on the operation that is preformed by the user.

I have Already wrote a post on another flutter toast message library which is very simple and old style to show Toast message example.

So, Let’s Begin Implementing Flutter Bot Toast Message into your Flutter project.

Flutter Bot Toast Library – message, Notification, Attached Widget pop up

Step 1 : offCourse you need new or existing flutter project

I am using Android-studio to work with Flutter Development, Check out  How to add Flutter Plugin in android Studio

Create a new Flutter project

File > New > New Flutter Project

Step 2 : Add bot toast dependencies in pubspec.yaml file

Then, once you Flutter project is been created open pubspec.yaml file and you need to add Bot_Toast dependencies 

dependencies:
  bot_toast: ^2.2.1  //add this line

// version may update check official site for more

then click on Package Get

Step 3 : Import bot toast package

then, when you have successfully added the library into your flutter project, now you will be able to use this bot toast message package where-ever required, just you need to import the bot_toast.dart file.

import 'package:bot_toast/bot_toast.dart';

add this import statement on top of main.dart in your project.

Step 4 : Initialization of Bot Toast

Widget build(BuildContext context) {
    return BotToastInit( // wrap MaterialApp with BotToastInit
      child: MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        navigatorObservers: [BotToastNavigatorObserver()], //Register route observer
        navigatorKey: navigatorkey,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );

Then, to make user of the library you need to :

  • Step 1 : Wrap MaterialApp with BotToastInit
  • Step 2 : Register route Observer

As shown in above Snippet Code.

Step 5 : Different  ways to show Toast message or Toast Notification

1. Simple Text Message

Simple Toast message flutter

RaisedButton(
              child: Text("Simple Text Toast"),
              onPressed: () {
                BotToast.showText(text: "Simple Toast Message Example");
              },
            ),
2. Show a Toast Notification on top of the Screen

Toast Notification Flutter

RaisedButton(
              child: Text("Show Notification Toast"),
              onPressed: () {
                BotToast.showSimpleNotification(
                  title: "Simple Notification Toast Message",
                  subTitle: "This is Sub Title",
                  hideCloseButton: true,
                );
              },
            ),

This Snippet Code will show a Notification when user click on the button,

There are various property that can we used eg :

title : show text on the notification

subTitle : shows description

hideCloseButton : their is a close button on the Toast Notification using which user can close immedietly by clicking on close button, we can hide that button by setting it to true.

3. Show Loading Toast 

loading Bot Toast

RaisedButton(
             child: Text("Show Loading Toast"),
             onPressed: () {
               BotToast.showLoading(
                 clickClose: true,
               ); //when loading toast is clicked it closes
             },
           ),
4. Show Attached Widget

you can use Attached Widget to show any kind of Widget in the Toast Form.

show Attached widget bot toast

RaisedButton(
              child: Text("pop-up an attachment"),
              onPressed: () {
                BotToast.showAttachedWidget(
                    allowClick: true,
                    attachedBuilder: (_) => Center(
                          child: Card(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Row(
                                
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Icon(
                                    Icons.favorite,
                                    color: Colors.red,
                                  ),
                                  Text("Hit the Like"),
                                ],
                              ),
                            ),
                          ),
                        ),
                    target: Offset(520, 520),
                    duration: Duration(
                        seconds: 3)); //when loading toast is clicked it closes
              },
            ),

In the Above Snippet code i have attached Card with child as Row where Row contain 2 children Icon and Text.

And also we need to set the duration to show the Attached Toast widgets.

Complete Code of this Flutter Tutorial on Bot Toast Message

When you know the basic of this Flutter Bot Toast message libray just Copy paste the below lines of code in main.dart file

main.dart

import 'package:flutter/material.dart';
import 'package:bot_toast/bot_toast.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  GlobalKey<NavigatorState> navigatorkey = GlobalKey<NavigatorState>();
  @override
  Widget build(BuildContext context) {
    return BotToastInit(
      child: MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        navigatorObservers: [BotToastNavigatorObserver()],
        navigatorKey: navigatorkey,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Bot Toast"),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Flutter Bot Toast Message Example",
              style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w800,
                  fontStyle: FontStyle.italic),
            ),
            SizedBox(
              height: 25,
            ),
            RaisedButton(
              child: Text("Simple Text Toast"),
              onPressed: () {
                BotToast.showText(text: "Simple Toast Message Example");
              },
            ),
            RaisedButton(
              child: Text("Show Notification Toast"),
              onPressed: () {
                BotToast.showSimpleNotification(
                  title: "Simple Notification Toast Message",
                  subTitle: "This is Sub Title",
                  hideCloseButton: true,
                );
              },
            ),
            RaisedButton(
              child: Text("Show Loading Toast"),
              onPressed: () {
                BotToast.showLoading(
                  clickClose: true,
                ); //when loading toast is clicked it closes
              },
            ),
            RaisedButton(
              child: Text("pop-up an attachment"),
              onPressed: () {
                BotToast.showAttachedWidget(
                    allowClick: true,
                    attachedBuilder: (_) => Center(
                          child: Card(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Icon(
                                    Icons.favorite,
                                    color: Colors.red,
                                  ),
                                  Text("Hit the Like"),
                                ],
                              ),
                            ),
                          ),
                        ),
                    target: Offset(520, 520),
                    duration: Duration(
                        seconds: 3)); //when loading toast is clicked it closes
              },
            ),
          ],
        ),
      ),
    );
  }
}

And here you go your app is ready to show toast messages on both iOS and Android