Custom Toast Message In Flutter
In flutter, no particular widget or function is accessible to show a toast message. We can utilize the snackbar widget rather than toast at the same time, we can’t change the place of the snackbar like toast. To add usefulness for showing toast messages to our flutter application we need to utilize FlutterToast dependency.
This blog will explore the Custom Toast Message In Flutter. We perceive how to execute a demo program. We will learn how to create custom toast messages using fluttertoast dependency with different properties in your flutter applications.
fluttertoast | Flutter Package
Toast Library for Flutter Now this toast library supports two kinds of toast messages one which requires BuildContext…pub.dev
Table Of Contents :
Introduction:
Toast is only a flash message in a flutter, which is utilized to show data to the client temporarily. It shows up at the lower part of the screen as default and disappears after a particular time.
For the most part, we will utilize a toast message to inform the user about the situation with the activity performed. For example, after presenting a registration form we can tell the user about the situation with the enlistment utilizing a toast message.
Demo Module :
The above demo video shows how to create a custom toast message in a flutter. It shows how the custom toast message will work using the fluttertoast package in your flutter applications. It shows when the user presses the button and then toast will display on your screen.
Properties:
Let’s customize the toast message utilizing various properties of FToast.ShowToast() method. These properties will assist in styling and situating the toast message.
- > child — This property is used to take a widget as value. We will use this property to add a child widget which is a custom toast message.
- > toastDuration — This property is used to take Duration as value. We will define how long we want the toast message to appear on the screen.
- > gravity — This property is used to it takes constants of ToastGravity like BOTTOM_LEFT, BOTTOM_RIGHT, BOTTOM, etc.
- > fadeDuration — This property is used to take an int as value. We will define how long the toast message should fade before appearing on the screen.
- > positionedToastBuilder — This property is used to take a builder function as a value. If we want to position the toast message at the custom position on the screen other than the constant values of ToastGravity discussed above.
Implementation:
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
fluttertoast: ^8.1.1
Step 2: Import
import 'package:fluttertoast/fluttertoast.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We have to declare an object of class FToast which is provided in the dependency.
FToast? fToast;
Now, we have to initialize the object with the current context in the initState() method.
@override
void initState() {
super.initState();
fToast = FToast();
fToast?.init(context);
}
In the body part, we will add a Column widget. In this widget, we will add CrossAxisAlignment as the center. Also, add an image and ElevatedButton with text and the onPressed method. In this method, we will add the showCustomToast() method.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(height: 50,),
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
ElevatedButton(
child: const Text("Show Custom Toast Message"),
onPressed: () {
showCustomToast();
},
),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now we will deeply describe showCustomToast() method are:
We will create the showCustomToast() method. In this method, we will add a Widget toast and showToast.
showCustomToast() {
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.blueGrey,
),
child: const Text(
"This is a Custom Toast Message",
style: TextStyle(color: Colors.white),
),
);
fToast?.showToast(
child: toast,
toastDuration: const Duration(seconds: 3),
);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_custom_toast_message_demo/splash_screen.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: const Splash(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
FToast? fToast;
@override
void initState() {
super.initState();
fToast = FToast();
fToast?.init(context);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Custom Toast Message Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Container(
margin: const EdgeInsets.all(20),
alignment: Alignment.topCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(height: 50,),
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
ElevatedButton(
child: const Text("Show Custom Toast Message"),
onPressed: () {
showCustomToast();
},
),
],
),
));
}
showCustomToast() {
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.blueGrey,
),
child: const Text(
"This is a Custom Toast Message",
style: TextStyle(color: Colors.white),
),
);
fToast?.showToast(
child: toast,
toastDuration: const Duration(seconds: 3),
);
}
}
Conclusion:
In the article, I have explained the Custom Toast Message basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Custom Toast Message On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Custom Toast Message in your flutter projects. We will show you what the Introduction is. Make a demo program for a working Custom Toast Message using the fluttertoast package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
