A Flutter Toast

There are three main forms of APP feedback: Toast, Snackbar and dialog. Toast is usually used to prompt users with less important information, and will pop up and display text for a period of time. It will disappear when the time is up. Compared to Snackbars and Dialogs, there are fewer intrusions into the screen. How can a developer not grasp the basics of Toast? In this article, We will discuss toast in Flutter.

The effect

With the picture and the truth, let’s look at the final effect we want to achieve this time:

Download the source code

👉 inGithuborYards cloudCheck out the entire code for this article.

Looking for fluttertoast

Some students will ask, why choose plug-ins and not native… Because Flutter doesn’t have the effect we need! Only the built-in snackBar!

As usual, go to pub.dev to find the plugin we need and type fluttertoast in the search box:

See the first one:

99. That’s a pretty high rating.

Point in:

View the latest release date and compatibility:

When choosing a Flutter plugin, we will first look at its rating (the official Flutter rating is strict). Then check its latest date (if it hasn’t been updated for a long time, the project may have stopped maintenance). Finally, let’s see if it’s compatible with our rules.

It also supports Android, IOS and Web. Good compatibility.

Actual combat began

Create a project

Create a Flutter project and clean up the project first.

Delete the./test directory because our project is just a simple demo. Test-driven development is not required.

Dart has a lot of built-in comments for projects created with flutter./lib/main.dart we replace the entire file with:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Emirates technology Station Flutter Toast',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter toast ')); }}class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    returnScaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[], ), ), ); }}Copy the code

💡 code parsing: removed redundant comments, and partially initialized buttons. Add some names.

🟢 to run the project, it should be fairly succinct:

Introduction of depend on

Add dependencies to./pubspec.yaml:

  fluttertoast: ^ 4.0.1
Copy the code

🟡 Tip: Be sure to pay attention to character indentation. Incorrect indentation will cause the import to fail!

Run IDE Packages Get or type in terminal:

flutter pub get
Copy the code

Create button

Go back to./lib/main.dart and add a button to Column:

RaisedButton(
  child: Text("Pop up the toast"),
  onPressed: (){},
)
Copy the code

This button will be used to trigger the pop-up toast

Using fluttertoast

Import fluttertoast:

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

Add the function onPressed in the button created above to replace the RaisedButton above with:

RaisedButton(
  child: Text("Pop up the toast"),
  onPressed: () {
    Fluttertoast.showToast(
                    msg: "You look great today.",
                    toastLength: Toast.LENGTH_SHORT,
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 1,
                    backgroundColor: Colors.black45,
                    textColor: Colors.white,
                    fontSize: 16.0); },)Copy the code

The following will explain the function of each parameter in detail, run first, see!

The specific location is shown as follows:

🟢 Run the project (because there is a new library imported, it is recommended to stop and re-run it), click the “Pop up toast” button and try:

Succeeded.

Fluttertoast.showToast

parameter	The parameter types	Parameters that	Whether will pass	The default value
msg	String	Set the string presented by toast	Square root	–
gravity	ToastGravity enumeration	Set the display position of toast (Web only supports top and bottom).	x	ToastGravity.BOTTOM
timeInSecForIosWeb	int	Ios seconds	x	1
bgcolor	Color	Toast the background color	x	Colors.black
textcolor	Color	Toast text color	x	Colors.white
fontSize	float	Toast text font size	x	16.0
webShowClose	bool	Whether to display the close button on the Web (“×”)	x	false
webBgColor	String	Web side hexadecimal color, for example#00b09b	x	Gradient (# 00b09B and # 96C93D)
webPosition	String	Horizontal position of Web side toast (left.centerorright)	x	right

Feel free to pass in arguments and values to see what happens!

The Web version of Fluttertoast is not very good looking after Algerian tests. So do not release web side screenshots!

6. Actively Hide toast

Not only can toast disappear automatically, but it can also be made to disappear instantly according to our needs.

Add another button below the previous one:

RaisedButton(
  child: Text("Hidden toast." "),
  onPressed: () => Fluttertoast.cancel(),
)
Copy the code

As shown in figure:

🟢 To run the project, first click on the “Pop up toast” button, then click on the” hide Toast “button, you will find that the prompt immediately disappears:

You’re done

At this point, our tutorial is almost complete. If you have any questions about this article, feel free to discuss them in the comments section below.

Download the source code

👉 inGithuborYards cloudCheck out the entire code for this article.

Thank you

• fluttertoast – pub.dev
• FlutterToast – Github
• Photo by Francesco Ungaro on Pexels
• (In no particular order)

conclusion

The original link

More technical dry goods, welcome to visit emirates technical station