GF Flutter Toast Widget

Banner image

GF Flutter Toast Widget and its Usage

GFToast is a ** Flutter Toast Message** that is used to show toast messages or errors in a given interval of time and it can have trailing widgets to display icons or buttons.

The simple example code for Flutter Toast Widget is shown below.

import 'package:getwidget/getwidget.dart';

            GestureDetector(
              onTap: () => GFToast.showToast(
                'GetFlutter is an open source library that comes with pre-build 1000+ UI components.',
                context,
              ),
              child: Container(
                margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
                padding: const EdgeInsets.all(5),
                decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(7)),
                    color: GFColors.DARK,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black.withOpacity(0.40), blurRadius: 5)
                    ]),
                child: GFListTile(
                    color: GFColors.DARK,
                    title: const Text(
                      'Show Toast',
                      style: TextStyle(color: GFColors.WHITE),
                    ),
                    icon: Icon(
                      CupertinoIcons.forward,
                      color: GFColors.SUCCESS,
                    )),
              )),

GF Flutter Toast with Trailing widget:

GFToast can be used to dismiss or cancel messages or warnings with the help of a GFButton inside the GFToast. Hence GFToast will be usually accompanied by a Flutter button.

The below example shows a simple code of how the Flutter button is used with the GFToast.

Flutter Custom Toast with Button

import 'package:getwidget/getwidget.dart';

           GestureDetector(
              onTap: () => GFToast.showToast(
                  'GetFlutter is an open source library that comes with pre-build 1000+ UI components.',
                  context,
                  toastPosition: GFToastPosition.BOTTOM,
                  textStyle: TextStyle(fontSize: 16, color: GFColors.DARK),
                  backgroundColor: GFColors.LIGHT,
                  trailing: Icon(
                    Icons.notifications,
                    color: GFColors.SUCCESS,
                  )),
              child: Container(
                margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
                padding: const EdgeInsets.all(5),
                decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(7)),
                    color: GFColors.DARK,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black.withOpacity(0.40), blurRadius: 5)
                    ]),
                child: GFListTile(
                    color: GFColors.DARK,
                    title: const Text(
                      'Show Toast with trailing',
                      style: TextStyle(color: GFColors.WHITE),
                    ),
                    icon: Icon(
                      CupertinoIcons.forward,
                      color: GFColors.SUCCESS,
                    )),
              )),

GF Flutter Toast with custom Positioning

Toasts can be positioned accordingly over viewing screen. The positioning can be done using GFToastPosition.BOTTOM. The usage of these is shown below.

import 'package:getwidget/getwidget.dart';

            GestureDetector(
              onTap: () => GFToast.showToast(
                'GetFlutter is an open source library that comes with pre-build 1000+ UI components.',
                context,
                toastPosition: GFToastPosition.BOTTOM,
              ),
              child: Container(
                margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
                padding: const EdgeInsets.all(5),
                decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(7)),
                    color: GFColors.DARK,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black.withOpacity(0.40), blurRadius: 5)
                    ]),
                child: GFListTile(
                    color: GFColors.DARK,
                    title: const Text(
                      'Show Toast with toast position',
                      style: TextStyle(color: GFColors.WHITE),
                    ),
                    icon: Icon(
                      CupertinoIcons.forward,
                      color: GFColors.SUCCESS,
                    )),
              )),

GF Flutter Toast Custom Properties

GFToast can be customized for a better look and feel. Here are the properties:

NameDescription
texttext of type [String] display on toast
backgroundColordefines the background color of the toast
textStyledefines the test style of the toast text
toastBorderRadiusdefines the border radius of the toast
borderdefines the border of the toast
toastPositiondefines the position of toast over the screen
toastDurationdefines the duration of time toast display over screen
trailingdefines the trailing widget of the toast

Last Updated: February 4, 2022