Flutter Toast Widget:

Flutter Toast is simple widget that displayed on the screen to show some particular messages and remains for a short period of time and  disappears on its own after a few seconds. It is useful to show some error messages or any popups to the user. In another word, Flutter Toast Widget is allows to build an additional action event in your application that allows user to get a specific message for a paricular interval of time to get alert with addiotional messeage without blocking the user intraction.

Toast Widget with Button
Toast widget Example

So, Are you ready to develop some awesome Flutter Toast widget for you apps? Let's buid some Toast widget that helps to increase user experience with you application. Here i am going to use an open-source UI Library known as GetWidget to build this widget. Here is a short introduction about GetWidget Toast widget and why i am using this.

GetWidget Toast:

GetWidget Toast is used to display quick warning or error messages on the screen and it disappears on its own or stays according to the user's requirement. It is helpful to show any kind of messages with the customisation of the toasts to the user. As it is highly customizable it can be widely used throughout the application wherever needed. It can be displayed in any position throughout the screen usin the position properties. Thus GF Toast has a number of options and can be used widely.

Why GetWidget for Flutter Toast Widget?

Since it is an open-source UI library an free to use for personal as well as commerical application. Now it has some awesome variant with toast widget and it is easy to use, so this save my development time as well as i got some awesome custom properties that help me to develop toast widget for my Flutter mobile applications.

GF Toast Widget can be widely divided in to the following:

Auto Dismissable Toast:

As the name says, the toast will be dismissed after a certain given number of seconds. It can be controlled by the user and depends on how much time the user gives it to stay on the screen, after the time it disappears on its own.

Basic Toast:

Basic toast is a simple toast which stays on the screen and on the click of a button it diasppears. It can also be used as auto dismiss toast by making autoDismiss property to true.

Rounded Toast:

Rounded toast is same like basic toast but has  rounded edges around the toast and makes it look better for the user to see.

Full Width Toast:

Full Width Toast will take the maximum and full width of the screen to print the error messages and the toast will look in full width according to the mobile screen.

How to Start:

Now, here is the guide about how we should you can start developing Flutter Toast Widget with the help of GetWidget UI Library.

First, Let go with Getting started, It will guide you how to start building a beautiful flutter application UI with GetWidget UI library. Now, we have to install the GetWidget package from pub.dev, To import the package in your Flutter project follow the below guide.

Install Package from pub.dev :

https://pub.dev/packages/getwidget - Check the detaila about GetWidget Package.

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^1.0.11

Keep playing with the pre-built UI components.

Example of how to start and use the GFToast:

GFToast should be wrapped inside the GFFloating Widget(see GFFloating Widget blog).The child of the GFFloatingWidget takes GFToast as its argument and the body takes any kind of widgets. The simple code is as shown below.

import 'package:getwidget/getwidget.dart';
 
 return Scaffold(
   body:GFFloatingWidget(
     child:GFToast(
     text: 'This item already has the label “travel”',
   ),
   body:Text('body or any kind of widget here..')
 )
)

Example of Auto Dismissable toast:

The bool value true should be passed to autoDismiss property to make the toast, auto dismissible,

import 'package:getwidget/getwidget.dart';

GFToast(
  text: 'This item already has the label “travel”',
  autoDismiss: true,
)

Example of basic toast with a button in it:

import 'package:getwidget/getwidget.dart';

GFToast(
  text:'This item already has the label “travel”',
  button: GFButton(
     onPressed: () {},
     text: 'Close',
     type: GFButtonType.transparent,
     color: GFColor.success,
   ),
   autoDismiss: false,
),

Example of rounded toast with a button in it:

import 'package:getwidget/getwidget.dart';

GFToast(
   text: 'Paired Succesfully !',
   button: GFButton(
       onPressed: () {},
       text: 'OK',
       type: GFButtonType.transparent,
        color: GFColors.SUCCESS,
    ),
      type: GFToastType.rounded,
      autoDismiss: false,
       alignment: Alignment.topLeft,
  ),

Replace the type to GFToastType.fullWidth to get the fullWidth toast

Positioning of the Toast:

Toasts can be positioned accordingly inside the GFFloating Widget. The positioning takes two parameters ie, horizontalPosition and verticalPosition. The usage of these is shown below.

import 'package:getwidget/getwidget.dart';

body:GFFloatingWidget(
    horizontalPosition:40.0,
    verticalPosition:20.0,
    child:GFToast(
    text: 'Logged In',
  ),
 body:Text('body or any kind of widget here..')
)

Check out more details about Flutter Floating Widget more details and custom properties on below:

GF Floating Widget
GF Floating Widget is a simple widget that acts like the outer wrapper to other kind of components. It has properties like body and child in which the body acts like the Scaffold’s body.

Conculsion:

Here we discuss, what Flutter Toast Widget is? And how we can use and implement it into our Flutter app through GetWidget Toast component. Here, there are options to customize and use other types of toasts and to position the toast wherever needed in the screen.

FAQ's

Q. Without using autoDismiss property can we dismiss the toast ?

Ans: Yes, by default autoDismiss property is set to true, if autoDismiss is not required then set it to false.

Q. Can we change the width of the toast accordingly?

Ans: Yes we can change the width by using the width property.

Q. Does Flutter Toast Widget support for Web?

Ans: Yes, But for web it is on beta phase i suggest you to not use in production untill Flutter do not relase the stable version for Flutter Web.

Q. Can we use GetWidget Toast widget for production app?

Ans: Yes, Since it is an open-source library, You can use on your personal as well as commerical application too.

Q. Is This Flutter Toast Widget customizable?

Ans: Yes, It is fully customizable, So you can customize as per you Flutter application requirements.