Flutter Toast

Introduction

Flutter provides developers with the option of multiple ways to deliver the functionalities of Toast. One of the ways could be using SnackBars and the other way is Flutter Toast plugin by Karthik Ponnam, which we are going to discuss today here.

How to Use?

Let's start with the basics of setting up the project for using this plugin, Toast in Flutter. Head over to the pub which is a store for all the plugins and the libraries. Let's start by creating an empty project and adding the dependency name and version in the pubspec.yaml file. pubspec.yaml is a configuration file that Flutter uses when bundling up the resources required for building apk/ipa or for any other deployment target device.

And now run the flutter pub get command to download the necessary files.

Toast with No Build Context

Sometimes you want to show a Toast in Flutter where you don't have access to a BuildContext. FlutterToast plugin allows just that. Here is how you can achieve this:

Open main.dart and inside _MyHomePageState in the _incrementCounter function, replace all the contents with this:

Now when you run the app, by clicking on FAB, you'll get toast like this image shown below:

How does Flutter render a Toast without any context?

We know Flutter needs BuildContext to locate the widget on the screen. Then how does this Toast come up?

The answer is simple, the plugin takes the data from Flutter to Android Native with the help of the method channel. And then a native toast function is called with the provided arguments. And this is the reason why this toast has little-to-no customization.

These are all of the properties of the Flutter Toast without any BuildContext.

Toast in Flutter which Requires BuildContext

Now, we want a lot more customization in the Flutter Toast that we want to show in our fancy little app. How to do that? You are right, about using in-built widgets. This is how we achieve that.

Create a Flutter Toast variable and initialize the toast in the initState method by overriding it.

And now just replace the contents of _incrementCounter with this to create a toast and show it:

Bonus Content 1: How does Flutter know where to place the Toast on the Screen?

Flutter Toast plugin uses Overlays to position the Toast on the screen. When you choose Gravity eg. Gravity.CENTER_RIGHT, internally wraps your widget with a POSITIONED with some custom positions. Flutter uses Overlays to show Floating Action Buttons on the screen.

Bonus Content 2: If you add two calls to show Toast in Flutter and then call removeCustomToast, which Toast will be removed and which one will be shown on screen?

Flutter makes the first call to showToast and native adds it to the queue and then adds the other toast to the queue. The first toast is shown but cancelled immediately after because the second toast was queued and the cancel call was synchronous and cancelled whichever toast was visible on screen.

Use NavigatorKey for Context (To Access Context Globally)

Remember when talked about using Flutter Toast which didn't require BuildContext, we said places in Flutter where BuildContext is not available, we could use that method. But we already know that method offers very little customization, we can use the same method which we discussed in Toasts with BuildContext but with a global context.

We need to do 2 things differently here. First, we need to add a builder in MaterialApp like this:

This is required because the plugin needs to be able to detect the overlay.

The second thing is creating a NavigatorKey and using it for context replacement.

Now we need to initialize the Toast in Flutter using the navigator key.

Now we can create and show Flutter Toast anywhere in Flutter.

Custom Toast for Android

Although custom toasts are deprecated from Android R, before that version, we can create custom toasts in android.

Let's start by creating a file named toast_custom.xml inside app/src/res and add the contents from below:

Now when you call the _incrementCounter method, with this call, you will get a customized native toast.

This is how it looks: