flutter-tutorial

Flutter Toast

Toast is a flutter flash message that displays information to the user for a limited amount of time. By default, it shows at the bottom of the screen and disappears after a set amount of time. In most cases, a toast message will be used to inform the user of the status of the procedure. For example, after completing a registration form, we can send a toast message to the user informing them of the status of the registration.

There is no unique widget or function for displaying a toast message in flutter. We can replace toast with a snackbar widget, but we can’t adjust the position of the snackbar like we can with toast. We must use the FlutterToast dependency to add capabilities for displaying toast messages to our flutter application. This tutorial demonstrates how to use the FlutterToast dependency to build and display a toast message in flutter. With the help of an example, you will also learn how to customise and decorate toast messages using various parameters.

Flutter Toast shows a plain toast with no animations. Consider using Motion toast if you want to provide a stylish and attractively animated toast.

Use this package as a library

Depend on it, Run this command in terminal:

 $ flutter pub add fluttertoast

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  fluttertoast: ^8.0.9

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it, Now in your Dart code, you can use:

import 'package:fluttertoast/fluttertoast.dart';

Example:

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  initState() {
    super.initState();
  }

  void showLongToast() {
    Fluttertoast.showToast(
      msg: "This is Long Toast",
      toastLength: Toast.LENGTH_LONG,
    );
  }

  void showColoredToast() {
    Fluttertoast.showToast(
        msg: "This is Colored Toast",
        toastLength: Toast.LENGTH_SHORT,
        webBgColor: "#009968");
  }

  void showShortToast() {
    Fluttertoast.showToast(
        msg: "This is Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        timeInSecForIosWeb: 1);
  }

  void showTopShortToast() {
    Fluttertoast.showToast(
        msg: "This is Top Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.TOP,
        timeInSecForIosWeb: 1);
  }

  void showCenterShortToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1);
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Learn Code Zone'),
        ),
        body: new Center(
          child: Column(
            children: <Widget>[
              new Padding(
                padding: const EdgeInsets.all(10.0),
                child: new RaisedButton(
                    child: new Text('Show Long Toast'),
                    onPressed: showLongToast),
              ),
              new Padding(
                padding: const EdgeInsets.all(10.0),
                child: new RaisedButton(
                    child: new Text('Show Short Toast'),
                    onPressed: showShortToast),
              ),
              new Padding(
                padding: const EdgeInsets.all(10.0),
                child: new RaisedButton(
                    child: new Text('Show Center Short Toast'),
                    onPressed: showCenterShortToast),
              ),
              new Padding(
                padding: const EdgeInsets.all(10.0),
                child: new RaisedButton(
                    child: new Text('Show Top Short Toast'),
                    onPressed: showTopShortToast),
              ),
              new Padding(
                padding: const EdgeInsets.all(10.0),
                child: new RaisedButton(
                    child: new Text('Show Colored Toast'),
                    onPressed: showColoredToast),
              ),
            ],
          ),
        ),
      ),
      theme: new ThemeData(primaryColor: Colors.deepOrange),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.