The use of Flutter Toast

It is a frequent requirement to give users a little hint from the app interface. When we develop Android apps, we will use Toast class to give the hint. Are there any similar widgets in Flutter that can help us accomplish similar needs? This article will describe two ways that FLUTTER can give users pop-up alerts.

Official Toast from Material Design, Snackbars

It may be useful to give the user a brief notification when performing certain operations. For example, when a user deletes a message from a list, you might want to notify him that the message has been deleted, or even that our program can provide the user with an undo action.

In Material Design, SnackBar provides this functionality. To use Snackbar in flutter we can follow these steps.

Creating a Scaffold

When creating applications that follow Material Design guidelines, provide a consistent look and feel for your applications. In this example, the Snackbar is displayed at the bottom of the screen and does not overlap with the other important widgets (FloatingActionButton)

The Scaffold’s widgets from Material Design create this visual structure and ensure that important window components do not overlap.

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Demo'),
  ),
  body: SnackBarPage(), // Complete this code in the next step.
);
Copy the code

Displays a SnackBar

Once Scaffold is created, when displaying SnackBar we first create a SnackBar and then display it with ScaffoldMessenger.

final snackBar = SnackBar(content: Text('Yay! A SnackBar! ')); // Find ScaffoldMessager from the component tree and use it to show a snackBar ScaffoldMessenger. Of (context). ShowSnackBar (snackBar);Copy the code

Provide an optional operation to the SnackBar

When displaying a SnackBar, we might want to provide the user with an action. For example, if a user accidentally deletes a message, they can use an optional action in the SnackBar to restore the message.

The following shows how to provide optional actions to users in SnackBar.

final snackBar = SnackBar( content: Text('Yay! A SnackBar! '), action: SnackBarAction(label: 'Undo', onPressed: () {// We only need to do what the user needs to Undo here. },),);Copy the code

Dependencies from third-party libraries, Fluttertoast

Fluttertoast is an implementation from a third-party library that pops up toast prompts for users on Android, IOS, and the Web. It provides two internal ways to display toasts, allowing us to easily pop up the toast in flutter.

The use of fluttertoast

1. Use channel to display toast of each native platform

1. Add the following code to your dependency configuration

Fluttertoast: ^ 8.0.6Copy the code

2. Import the appropriate DART library file where it is used

import 'package:fluttertoast/fluttertoast.dart';
Copy the code

3. Pop up the Toast

Fluttertoast.showToast( msg: "This is Center Short Toast", toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.CENTER, timeforiosWeb: 1, backgroundColor: color. red, textColor: color. white, fontSize: 16.0);Copy the code

4. Cancel the Toast

Fluttertoast.cancel()
Copy the code

5. Toast displays the configuration

The Toast of the Flutter platform implementation

FToast is the toast implemented by the author on the Flutter platform. He directly displays the toast on the Flutterview level without relying on the native operating system, so the toast implemented in this way is universal to all platforms.

1. FToast use

Since FToast is relatively easy to use, we will go directly to the demo

FToast fToast; @override void initState() { super.initState(); fToast = FToast(); fToast.init(context); } _showToast() {Widget toast = Container(padding: const EdgeInsets. Symmetric (horizontal: 24.0, vertical: BorderRadius: borderRadius. Circular (25.0), color: Colors. GreenAccent,), child: Row( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.check), SizedBox( width: 12.0,), Text (" This is a Custom Toast "),,,); fToast.showToast( child: toast, gravity: ToastGravity.BOTTOM, toastDuration: Duration(seconds: 2), ); // Custom Toast Position fToast.showToast( child: toast, toastDuration: Duration(seconds: 2), positionedToastBuilder: (context, child) {return toy (child: child, top: 16.0, left: 16.0,); }); }Copy the code

2. The key code

@override void initState() {super.initstate (); fToast = FToast(); fToast.init(context); } //2. Call the _showToast() method where appropriate _showToast() {Widget toast = Container(padding: const EdgeInsets. Symmetric (horizontal: Circular (25.0, vertical: 12.0), decoration: BoxDecoration(borderRadius: borderRadius. Circular (25.0), color: Colors.greenAccent, ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.check), SizedBox( width: 12.0,), Text (" This is a Custom Toast "),,,); fToast.showToast( child: toast, gravity: ToastGravity.BOTTOM, toastDuration: Duration(seconds: 2), ); // Custom Toast Position fToast.showToast( child: toast, toastDuration: Duration(seconds: 2), positionedToastBuilder: (context, child) {return toy (child: child, top: 16.0, left: 16.0,); }); }Copy the code

3. The cancellation of the FToast

// To remove present shwoing toast
fToast.removeCustomToast()

// To clear the queue
fToast.removeQueuedCustomToasts();
Copy the code