Design Converter
Flutter
React
Shopify
Flutter
React
Shopify
Discord
Discord
Functionalities
Last updated on Jul 17, 2024
Last updated on Jul 17, 2024
Just a tiny notification but it's enough for us to feel reassured while performing tasks on Android or iOS apps such as sending messages, making payments, etc. These notifications don't interrupt your navigation, it simply appears and fades away without blocking a view behind them.
In today's post, we are going to learn about the Flutter toast notifications, and how to create a toast notification in Flutter with the FlutterToast.
So, let's begin!
A Flutter toast is a non-clickable, unobstructed, auto-expiring element in the app that is used to display brief information in a short time. In the Android or iOS app, it is displayed quickly and disappears in a while.
The toast message is mostly used by developers to show feedback on the operations performed by the user. A toast notification is one of the essential features in mobile applications that makes the app more interactive.
To create a toast notification in the Flutter app you need to add a FlutterToast dependency to the project because in Flutter there is no specific widget or function available to display a toast message. Even the snack bar widget which is used instead of toast does not have a flexible position like toast.
Let’s find out in detail about creating toast notifications in a Flutter application.
To show a toast notification on user action in a Flutter app we will use FlutterToast dependency. Also, you can customize and style the toast message using different properties.
The library supports two kinds of toast messages, the one which requires BuildContext and the other with No BuildContext
It has limited features and no control over the app UI. It supports Android, iOS, and web ( Tostify JS ) platforms.
It gives full control over your toast notification. The toast notifications can be
To use the package run the following command
1 flutter pub add fluttertoast
This will add the following line to your pubspec.yaml file.
1 dependencies: 2 fluttertoast: ^8.0.9 3
To import it in your Dart code, use:
1 import 'package:fluttertoast/fluttertoast.dart'; 2
You can also use the dependency inside using:
1 Fluttertoast.showToast(msg: "Hello!"); 2
The property accepts input strings as a value.
1 Fluttertoast.showToast( 2 msg: "This is a Toast", 3 ); 4 5
It accepts constants of Toast.LENGTH_LONG and Toast.LENGTH_SHORT as values.
1 Fluttertoast.showToast( 2 msg: "This is toast", 3 toastLength: Toast.LENGTH_LONG 4 ); 5 6
The property is used to change the position of the toast message. It can take a position as TOP, BOTTOM, or CENTER.
1 Fluttertoast.showToast( 2 msg: "Hi Codesinsider !!", 3 toastLength: Toast.LENGTH_LONG, 4 gravity: ToastGravity.CENTER 5 ); 6 7
It takes double the value to change the font size of the toast message.
1 Fluttertoast.showToast( 2 msg: "Hi Codesinsider !!", 3 toastLength: Toast.LENGTH_LONG, 4 fontSize: 20 5 ); 6 7
It takes material color as value to change the background of Toast message.
1 Fluttertoast.showToast( 2 msg: "Hi Codesinsider !!", 3 toastLength: Toast.LENGTH_LONG, 4 fontSize: 20, 5 backgroundColor: Colors.green 6 ); 7 8
Here is the your final code:
1 import 'package:flutter/material.dart'; 2 import 'package:fluttertoast/fluttertoast.dart'; 3 4 void main() { 5 runApp(MyApp()); 6 } 7 class MyApp extends StatelessWidget { 8 9 // This widget is the 10 // root of your application. 11 @override 12 Widget build(BuildContext context) { 13 return MaterialApp( 14 title: "Flutter Toast Demo", 15 theme: ThemeData( 16 primarySwatch: Colors.green, 17 ), 18 debugShowCheckedModeBanner: false, 19 home: MyHomePage(), 20 ); 21 } 22 } 23 24 class MyHomePage extends StatefulWidget { 25 @override 26 _MyHomePageState createState() => _MyHomePageState(); 27 28 } 29 class _MyHomePageState extends State
This tutorial shows you how to create a simple toast notification. If you want to create toast with Build context to have better control over UI check this example project.
Moreover, the Flutter toast displays a simple toast notification without animation. To display toast with beautiful animations consider using motion toast.
Well, now you know enough about the Flutter toast notification and how to use it in your application. But what if I say, now you can add toast notifications to your Flutter app with just a click with an app development platform, and there is a lot more that helps you to build a Flutter app in minutes.
The platform lets you convert your Figma design to Flutter code and provides you with Graphical UI so that you can simply configure different widgets of your Flutter app in minutes.
In general, it allows you to:
The Flutter Builder supports the Flutter toast library, and here is how you can add toast notifications to the Flutter app with DhiWise.
The platform capability doesn't end here, if you are building a full-stack application, DhiWise gives you everything to successfully build your project backend too. So, you don’t have to go anywhere to start building your app backend.
Now you might be worried about the flexibility of code customization and the generated code quality. However, DhiWise makes sure that the generated code has the best quality by supporting clean code architecture and it gives full flexibility to code customization, unlike other low-code platforms.
To know more about the DhiWise Flutter Builder and sign up today to keep Fluttering with freedom.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
