Flutter toast message: How to show a toast message in a flutter

Hey Guys, In this post, you will sort out some way to give a toast message in a flutter. You will find out how you can implement toast messages in a flutter.  We can show out a toast message on android, ios, and the web by using the flutter toast Package. This Package helps us with executing toast in a basic way. Along these lines,

Let’s start.

Step: 1 Create a new Project

To start with, make a flutter project by utilizing IDE. In the event that you are utilizing visual studio code, you can utilize the command. This command helps us create a flutter project. Ensure your pc is connected to the web. To create a flutter app you need to run this command.

flutter create app_name

Step: 2 Add Flutter Toast dependencies in the project

Open your project’s pubspec.yaml now. Next, add the fluttertoast package to the area for dependencies, and then click the pub get. to import the library into your project, and receive the link. The features of the fluttertoast package version may vary.

You can add the package with the help of terminal or cmd just type this command.

flutter pub add fluttertoast

Step:3 Create a home page

Now inside your lib folder, we are going to create a screen and we will make this screen our home page. For this create a dart file and name it home_page.dart. Make a statefulwidget inside this file and name it HomePage. And call this file and class from main.dart file a follow.

import 'package:flutter/material.dart';
import 'package:multiselectdrop/home_page.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

Now we will work inside you the _HomePageState class, and return a scaffold from here.

import 'package:flutter/material.dart';
 
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
 
  @override
  State<HomePage> createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Step: 4 Create Toast Widget

For showing the toast message we will use a button and the buttons onPressed property. Now for the body for the scaffold widget, we use a column and for the children of this column, we only use an ElevatedButton this will help us get our desired result.

Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Toast'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: const Text('Show Toast'),
              ),
            ],
          ),
        ],
      ),
    );

By now your app will look something like this

It’s very easy in a flutter to show a toast message. The plugin we are using is not too hard to understand you will understand it by reading this post.

For creating a flutter toast message first you have to import the library to the home page 

import 'package:fluttertoast/fluttertoast.dart';

First, we will see how you can show flutter toast in the center of the screen. For showing the flutter toast message in the center of your screen make a method inside your _HomePageState and name it showCentertoast

showCentertoast() {
    return Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0);
  }

Remember we have a button that says “show Toast” it has an onPressed method we will call this showCentertoast method from there.

ElevatedButton(
                onPressed: () {
                  showCentertoast();
                },
                child: const Text('Show Toast'),
              ),

When you pressed the button your toast will appear in the center of the screen and it will look like this.

We will see another example for showing flutter toast and how we can implement toast messages in a flutter.

Step: 5 Adding Gravity Property (To Show toast on Bottom)

This time the flutter toast will appear at the bottom for this you have changed the property of FlutterToast.showToast is gravity.

Change it to ToastGravity.BOTTOM. You can create a method showBottomToast like this

showBottomToast() {
    return Fluttertoast.showToast(
      msg: "This is Center Short Toast",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.red,
      textColor: Colors.white,
      fontSize: 18.0,
    );
  }

Now call this method from “Show Toast” buttons onpressed property like i did here

ElevatedButton(
                onPressed: () {
                  showBottomToast();
                },
                child: const Text('Show Toast'),
              ),

And this will look like this

Now you understand the basics of how to flutter toast works and now you can easily implement flutter toast inside your app. You can learn all the rest property of the flutter toast plugin that I did not mention here because they are easy to learn.

Full Code:

file: main.dart 

We already discuss at the starting

File: home_page.dart

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
 
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
 
  @override
  State<HomePage> createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Toast'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  showBottomToast();
                },
                child: const Text('Show Toast'),
              ),
            ],
          ),
        ],
      ),
    );
  }
 
  showCentertoast() {
    return Fluttertoast.showToast(
      msg: "This is Center Short Toast",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.red,
      textColor: Colors.white,
      fontSize: 18.0,
    );
  }
 
  showBottomToast() {
    return Fluttertoast.showToast(
      msg: "This is Center Short Toast",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.red,
      textColor: Colors.white,
      fontSize: 18.0,
    );
  }
}

I hope you did learn something new in this post and if you like this then you can leave a comment. If you have any doubt or have any problem implementing the flutter toast messages in your app then feel free to contact me or you can leave a comment for this.

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com