Fluttertoast in Flutter

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.

folder creation through cmd

  • 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

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
    
  // 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: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("GeeksforGeeks"),
        backgroundColor: Colors.green,
      ),
      body:Center(
        child:
            FlatButton(child: Text("Show toast",style: TextStyle(color: Colors.white)),
            color: Colors.blue,
            onPressed: (){
            Fluttertoast.showToast(
              msg: "GeeksforGeeks",
              backgroundColor: Colors.grey,
              // fontSize: 25
              // gravity: ToastGravity.TOP, 
              // textColor: Colors.pink
              );})
      ),
    );
  }
}

chevron_right


Output:



fluttertoast in flutter

If the font size is set to 25 the design changes as follows:
 

flutte with font size set

If the font size is set to 25 and gravity is set to  ToastGravity.TOP the design changes as follows:
 

flu with gravity

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:
 

fluttertoast in flutter with gravity and text color set




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

5


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.