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. Basically here, we are creating a new Flutter application using a command prompt.
- Delete the default code from the main.dart file and write your own code.
- Now, add fluttertoast in dependencies of the pubspec.yaml file:
Some Properties of showToast:
- msg: toast message.
- toastLength: Duration of toast
- backgroundColor: Background color to be shown.
- textColor: Text color to be shown.
- fontSize: Font size of toast message.
Example: main.dart
import 'package:flutter/material.dart' ;
import 'package:fluttertoast/fluttertoast.dart' ;
void main() {
runApp( const MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the // root of your application. @override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter Demo" ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false ,
home: const MyHomePage(),
);
}
} class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api _MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text( "GeeksforGeeks" ),
backgroundColor: Colors.green,
),
body: Center(
child: TextButton(
onPressed: () {
Fluttertoast.showToast(
msg: 'GeeksforGeeks' ,
backgroundColor: Colors.grey,
);
},
child: Container(
padding: const EdgeInsets.all(14),
color: Colors.green,
child: const Text(
'Show Toast' ,
style: TextStyle(color: Colors.white),
),
),
),
// FlatButton is deprecated. Use TextButton instead.
// child: FlatButton(
// color: Colors.blue,
// onPressed: () {
// Fluttertoast.showToast(
// msg: "GeeksforGeeks",
// backgroundColor: Colors.grey,
// // fontSize: 25
// // gravity: ToastGravity.TOP,
// // textColor: Colors.pink
// );
// },
// 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 the design changes as follows:
If the font size is set to 25 and gravity is set to ToastGravity.TOP and text color is set to pink the design changes as follows:
If you are Not Comfortable using Dependency then just use the below snippet:
eg:
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(“My amazing message! O.o”)));Customize SnackBar for your own.