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
Or
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:
Similar Reads
Flutter - FlutterLogo Widget
FlutterLogo widget is as simple as it sounds, it is just the flutter logo in the form of an icon. This widget also comes built-in with Flutter SDK. This widget can found its use as a placeholder for an image or icon. Below we will see its implementation with all its properties and constructor. Const
3 min read
Flutter - Rotate Transition
In Flutter, the page_transition package is used to create beautiful page transitions. It provides a wide range of effects that can be used from moving from one route to another. It is very convenient to use. In this article, we will explore the same by building a simple application. Steps to Impleme
3 min read
FlipCard in Flutter
flip_card is a component that provides a flip card animation. It could be used for hiding and showing details of a product. A sample video is given below to get an idea about what we are going to do in this article. Installing Add the dependency into pubspec.yaml file. dependencies: flip_card: ^0.6
3 min read
Flutter - RFlutter Alerts
In Flutter, rflutter_alert is useful to create alerts in applications easily. It is a customizable and best way to create alerts in Flutter. In this article, we will see the different styles of alerts we can create with this awesome Flutter library. Follow the article to learn about it. Adding the d
4 min read
Flutter - Tabs
Tabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail. T
2 min read
Flutter - Working with Layouts
Before talking about Layout in Flutter, there is just one thing to keep in mind that “Everything in Flutter is Widget". Meaning the core of the layout in any Flutter Application is the widget. Putting it simply, all the images, icons, labels and text, etc are technically widgets of different types a
6 min read
FlatButton Widget in Flutter
FlatButton is the material design widget in a flutter. It is a text label material widget that performs an action when the button is tapped. Let's understand with the help of examples. Disclaimer: As of May 2021 the FlatButton class in flutter is deprecated. TextButton class should be used instead.
3 min read
Flutter Tutorial
This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework. Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Flutter - Container Styling
In this article we will look at the most basic and simple widget in flutter Container. We will look that how can we style our container in different ways according to our need , so that we can effectively use this widget in our app . First of all we have to write some starting code for our project
4 min read
Container class in Flutter
Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas
9 min read