Flutter show toast example

Showing toast message is an important feature of native android applications. In android we can achieve this using a simple line of code. In this tutorial we will learn how to show toast in android and ios by implementing this feature in flutter. We can achieve this in flutter by importing  fluttertoast library.

Steps

  1. Import the fluttertoast library.
  2. Learn the code for showing toast in flutter.
  3. Implement the code on actions.

Importing library

Inorder to import the flutter toast library all you need to do is to add the following code into your pubspec.yaml file in the dependency section. After adding that click on get package link which will import the library.

fluttertoast: ^2.1.4

Learn code for showing toast

Now for displaying toas you can use the following code. Please note that you can change textcolor,background color,toast length,gravity etc based on your requirement.

Fluttertoast.showToast(
    msg: "Hello world",
    textColor: Colors.white,
    toastLength: Toast.LENGTH_SHORT,
    timeInSecForIos: 1,
    gravity: ToastGravity.BOTTOM,
    backgroundColor: Colors.indigo,
);

Implementing code on  a button click

In this step we will try to implement the toast functionality on a button click. In my first flutter tutorial i am explaining how to start a project in flutter . Once you start a new project in the current version of flutter a main.dart file will automatically created with some set of code. It will be having a floating button and a counter. Each time when you click on floating button it will call a function _incrementCounter().

Here we will write code to display toast on _incrementCounter() function. So that when the user clicks on floating button it will show a toast as well.Following will be the complete 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 Toast',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'Flutter Toast'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;

Fluttertoast.showToast(
msg: "You have pushed the button ${_counter} time.",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,
);
});
}

@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *