Fluttertoast in Flutter

Last Updated : 04 May, 2025

Fluttertoast is used to create a toast message by writing only one line of code. Below are some steps to create a Fluttertoast in Flutter. We can use the flutter_toast package to achieve a toast in Flutter. Let's see what we are going to build with a demo video.

Demo Video:

Constructor of showToast

Future<bool?> showToast({
    required String msg,
    Toast? toastLength,
    int timeInSecForIosWeb = 1,
    double? fontSize,
    String? fontAsset,
    ToastGravity? gravity,
    Color? backgroundColor,
    Color? textColor,
    bool webShowClose = false,
    dynamic webBgColor = "linear-gradient(to right, #00b09b, #96c93d)",
    dynamic webPosition = "right",
})

Key Properties of showToast

Property	Description
msg	Toast message
toastLength	Duration of toast
backgroundColor	Background color of the toast
textColor	Text color of the toast
fontSize	Font size of the toast message

Step by Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add flutter_toast as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart

dependencies:
     flutter:
       sdk: flutter
     fluttertoast: ^8.2.12

Now, run the below command in the terminal.

flutter pub get

Run the below command in the terminal.

flutter pub add fluttertoast

Step 3: Import dependencies

To use libraries, import all of them in the respective .dart file.

import 'package:fluttertoast/fluttertoast.dart';

Step 4: Working with the main

Add the boilerplate code below in main.dart and create a basic structure with an MaterialApp.

Dart

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

// Entry point of the Flutter application
void main() {
  runApp(const MyApp());
}

// Root widget of the application
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // Builds the MaterialApp widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo", 
      debugShowCheckedModeBanner: false, 
      home: const MyHomePage(), 
    );
  }
}

// Stateful widget for the home page
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

// State class for MyHomePage
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksforGeeks"),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: // Code Here
    );
  }
}

Step 5: Toast Method

Dart

 // Displays a toast message when the button is pressed
Fluttertoast.showToast(
    msg: 'GeeksforGeeks', // Message to display in the toast
    backgroundColor: Colors.grey, // Background color of the toast
  
);

Complete Source Code

main.dart:

Dart

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

// Entry point of the Flutter application
void main() {
  runApp(const MyApp());
}

// Root widget of the application
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // Builds the MaterialApp widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo", 
      debugShowCheckedModeBanner: false, 
      home: const MyHomePage(), 
    );
  }
}

// Stateful widget for the home page
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

// State class for MyHomePage
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksforGeeks"),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            // Displays a toast message when the button is pressed
            Fluttertoast.showToast(
              msg: 'GeeksforGeeks', // Message to display in the toast
              backgroundColor: Colors.grey, // Background color of the toast
              
            );
          },
          child: Container(
            padding: const EdgeInsets.all(14),
            color: Colors.green,
            child: const Text(
              'Show Toast',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Output:

If the font size is set to 25, the design changes as follows:

If the font size is set to 25 and gravity is set to ToastGravity.TOP design changes are as follows:

If the font size is set to 25 and gravity is set to ToastGravity.TOP and text color is set to blue, the design changes as follows:

If you are Not Comfortable using Dependency,, then just use the below snippet:

C++

 ScaffoldMessenger.of(context,).
 showSnackBar(SnackBar(content: Text("My amazing message! O.o")));

Customize SnackBar for your own.

Output:

Fluttertoast in Flutter

singh_teekam

Improve

Article Tags :

Fluttertoast in Flutter

Constructor of showToast

Key Properties of showToast

Step by Step Implementation

Step 1: Create a new Flutter Application

Step 2: Adding the Dependency

Step 3: Import dependencies

Step 4: Working with the main

Step 5: Toast Method

Complete Source Code

Similar Reads

Thank You!

What kind of Experience do you want to share?