You've successfully subscribed to developer.school
Great! Next, complete checkout for full access to developer.school
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Epic Toasts with FlutterToast

Paul Halliday
Paul Halliday

fluttertoast is a library that allows you to create Toast popups easily across iOS, Android and Web.

Video

Would you prefer to watch a video instead of reading this article? Here you go:

Project Setup

To get started, we'll go ahead and create a new Flutter project:

# New Flutter project
$ flutter create fl_toast

# Open in editor
$ cd fl_toast && code .

Dependencies

Next up, we'll need to add the fluttertoast dependency to our pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

  fluttertoast: ^4.0.1

Showing a Toast

Here's a typical example of the Fluttertoast call that we'll be using:

Fluttertoast.showToast(
  msg: _messageTextEditingController.text,
  timeInSecForIosWeb: 10,
  toastLength: Toast.LENGTH_LONG,
  webShowClose: true,
)

We'll be using a text box and button which displays a toast with the message a user has typed. Our newly created HomePage that does exactly that:

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController _messageTextEditingController;

  GlobalKey<FormState> _formKey;

  @override
  void initState() {
    super.initState();

    _formKey = GlobalKey<FormState>();
    _messageTextEditingController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Toast"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Form(
          key: _formKey,
          child: Column(children: [
            TextFormField(
              controller: _messageTextEditingController,
            ),
            FlatButton(
              onPressed: () => Fluttertoast.showToast(
                msg: _messageTextEditingController.text,
                timeInSecForIosWeb: 10,
                toastLength: Toast.LENGTH_LONG,
                webShowClose: true,
              ),
              child: Text("Show Toast"),
            )
          ]),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _messageTextEditingController.dispose();
    super.dispose();
  }
}

We'll also need to update the home within our main.dart:

import 'package:fl_toast/presentation/pages/home_page.dart';
import 'package:flutter/material.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: 'Toastie',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

We can configure our toasts even further with various other options as seen here: https://pub.dev/documentation/fluttertoast/latest/

Example on Flutter Web

Summary

Next time you're looking for a library to display toasts inside of your Flutter apps, give fluttertoast a try!

Code for this article: https://github.com/PaulHalliday/fl_toast

Flutter

Paul Halliday

πŸ‘‹ Want to see more content? Head over to the YouTube channel: https://youtube.com/c/paulhalliday!