How To Display And Customize Toast Using Flutter App

Posted By Bajarangi soft , Posted On 30-10-2020

to show toast message you can use flutterToast plugin to use this plugin you have I am not saying that it is hard it is simple and clean I would There are three way to show toast on flutter App. I will tell you about all three way that I know and choose which one you want to use. I would recommend the second one. 1 : using of external package. this is the first method which is the most easiest way to show toast on flutter app. first of all you have to add this package in pubspec.yaml

How To Display And Customize Toast Using Flutter App

Customize Toast
Step 1: We cannot directly remove the time stamp from Customize Toast but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code

dependencies:
  flutter:
    sdk: flutter
  toast: ^0.1.5

Step 2: After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command.

flutter pub get

Step 3: Open your project’s main.dart file and import material.dart and toast: ^0.1.5. dart package.

import 'package:toast/toast.dart';

Complete Code For Customize Toast In Flutter
main.dart

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red[700],
          title: const Text('Toast plugin'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: RaisedButton(
                  color: Colors.red[700],
                    child: Text('Show Bottom Toast',style: TextStyle(color: Colors.white),),
                    onPressed: () => showToast("Toast Example", gravity: Toast.BOTTOM)),
              ),
            ],
          ),
        ),
    );
  }

  void showToast(String msg, {int duration, int gravity}) {
    Toast.show(msg, context, duration: duration, gravity: gravity);
  }
}