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_nameTo 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:
dependencies:
flutter:
sdk: flutter
fluttertoast: ^8.2.12
Now, run the below command in the terminal.
flutter pub getOr
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.
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
// 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:
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:
ScaffoldMessenger.of(context,).
showSnackBar(SnackBar(content: Text("My amazing message! O.o")));
Customize SnackBar for your own.
Output:
