How to create a toast notification in the Flutter app?

Just a tiny notification but it's enough for us to feel reassured while performing tasks on Android or iOS apps such as sending messages, making payments, etc. These notifications don't interrupt your navigation, it simply appears and fades away without blocking a view behind them.

In today's post, we are going to learn about the Flutter toast notifications, and how to create a toast notification in Flutter with the FlutterToast.  

So, let's begin!

‍

What is a toast notification in the Flutter app?

A Flutter toast is a non-clickable, unobstructed, auto-expiring element in the app that is used to display brief information in a short time. In the Android or iOS app, it is displayed quickly and disappears in a while.

The toast message is mostly used by developers to show feedback on the operations performed by the user. A toast notification is one of the essential features in mobile applications that makes the app more interactive. 

To create a toast notification in the Flutter app you need to add a FlutterToast dependency to the project because in Flutter there is no specific widget or function available to display a toast message. Even the snack bar widget which is used instead of toast does not have a flexible position like toast. 

Let’s find out in detail about creating toast notifications in a Flutter application.

‍

How to create Toast Notification in Flutter?

To show a toast notification on user action in a Flutter app we will use FlutterToast dependency. Also, you can customize and style the toast message using different properties. 

fluttertoast 8.0.9

The library supports two kinds of toast messages, the one which requires BuildContext and the other with No BuildContext

1. Toast with No context

It has limited features and no control over the app UI. It supports Android, iOS, and web ( Tostify JS ) platforms.

2. Toast with Context

It gives full control over your toast notification. The toast notifications can be

1. Queued
2. Each can be removed 
3. The queue can be cleared

Installation

To use the package run the following command

flutter pub add fluttertoast

This will add the following line to your pubspec.yaml file.

dependencies:
    fluttertoast: ^8.0.9

To import it in your Dart code, use:

 import 'package:fluttertoast/fluttertoast.dart';

You can also use the dependency inside using:

 Fluttertoast.showToast(msg: "Hello!");

‍

Few properties of  Flutter toast:

• msg: Toast message
• toastLength: Toast message duration
• backgroundColor: Background color to be shown
• textColor:  Text color to be shown
• fontSize: Toast Message font size
• gravity:  Toast message location

‍

Flutter Toast message example (Toast with no Context):

1. msg

The property accepts input strings as a value.

Fluttertoast.showToast( 
        msg: "This is a Toast",
         );

‍

2. toastLength

It accepts constants of Toast.LENGTH_LONG and Toast.LENGTH_SHORT as values. 

Fluttertoast.showToast(
                msg: "This is toast",
                toastLength: Toast.LENGTH_LONG
              );

‍

3. gravity

The property is used to change the position of the toast message. It can take a position as TOP, BOTTOM, or CENTER.

Fluttertoast.showToast(
                msg: "Hi Codesinsider !!",
                toastLength: Toast.LENGTH_LONG,
                gravity: ToastGravity.CENTER
              );

‍

4. fontSize

It takes double the value to change the font size of the toast message. 

Fluttertoast.showToast(
      msg: "Hi Codesinsider !!",
      toastLength: Toast.LENGTH_LONG,
      fontSize: 20
     );

‍

5. backgroundColor

It takes material color as value to change the background of Toast message.

Fluttertoast.showToast(
      msg: "Hi Codesinsider !!",
      toastLength: Toast.LENGTH_LONG,
      fontSize: 20,
      backgroundColor: Colors.green
    );

‍

Here is the your final code:

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

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
	
// This widget is the
// root of your application.
@override
Widget build(BuildContext context) {
	return MaterialApp(
	title: "Flutter Toast Demo",
	theme: ThemeData(
		primarySwatch: Colors.green,
	),
	debugShowCheckedModeBanner: false,
	home: MyHomePage(),
	);
}
}

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

}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
		title:Text("FlutterToastExample"),
		backgroundColor: Colors.green,
	),
	body:Center(
		child:
			FlatButton(child: Text("Show toast",style: TextStyle(color: Colors.white)),
			color: Colors.green,
			onPressed: (){
			Fluttertoast.showToast(
			msg: "Hi Consider!!",
			backgroundColor: Colors.grey,
			);
            })
	),
	);
}
}

This tutorial shows you how to create a simple toast notification. If you want to create toast with Build context to have better control over UI check this example project. 

Moreover, the Flutter toast displays a simple toast notification without animation. To display toast with beautiful animations consider using motion toast. 

Well, now you know enough about the Flutter toast notification and how to use it in your application. But what if I say,  now you can add toast notifications to your Flutter app with just a click with an app development platform, and there is a lot more that helps you to build a Flutter app in minutes.

‍

Meet DhiWise Flutter app builder: The ultimate platform to speed up your Flutter app development

The platform lets you convert your Figma design to Flutter code and provides you with Graphical UI  so that you can simply configure different widgets of your Flutter app in minutes. 

In general, it allows you to:

1. Change the widget into desired one such as a button, calendar, search view, and more
2. Create actions such as navigation, API integration, permissions authentications, and so on. 
3. Customize or add APIs.
4. Add constant.

‍

The Flutter Builder supports the Flutter toast library, and here is how you can add toast notifications to the Flutter app with DhiWise.

‍

‍

The platform capability doesn't end here, if you are building a full-stack application, DhiWise gives you everything to successfully build your project backend too. So, you don’t have to go anywhere to start building your app backend.

Now you might be worried about the flexibility of code customization and the generated code quality. However, DhiWise makes sure that the generated code has the best quality by supporting clean code architecture and it gives full flexibility to code customization, unlike other low-code platforms.

To know more about the DhiWise Flutter Builder and sign up today to keep Fluttering with freedom.