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

Recommended Posts:

    Article Tags :

    5


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