Cara Membuat 2 Toast Keren Snackbar & Plugin Flutter Toast Di Flutter Web & Android

Oktober 17, 2022

kurang lebih untuk pembuatan toast di flutter seperti ini. sayangnya memang tidak sangat mirip dengan toast pada java android studio.

intinya kita bisa menggunakan ScaffoldMessenger untuk menunjukkan kepada pengguna kondisi apa yang terjadi,

1. Menggunakan Snackbar

//step 1
ElevatedButton(
            onPressed: () {
              // Step 2
              var snackBar = SnackBar(content: Text('Toast Flutter'));
              // Step 3
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            },
            child: const Text(
              'Show SnackBar Message',
              style: TextStyle(fontSize: 24),
            ),
          ),

Pembahasan:

1. ElevatedButton (),

berufngsi memanggil Button style pada flutter. anda bisa menggunakan beberapa style button yang lain seperti yang sudah saya bahas disini Gaya 3 Button Flutter 2022

2. onPressed: () {},

fungsinya kondisi apa yang terjadi ketika button di click oleh pengguna

3. SnackBar (content: Text ('Toast Flutter'));

fungsinya membuat isi dari jenis text pada snack button

3. .showsnackbar

fungsinya menampilkan Snakcbar yang tadi dibuat pada pembahasan nomor 3

Notes :

Snackbar ini anda bisa gunakan di Web Build Atau Android

2. Menggunakan Plugin FlutterToast

Dibagian file pubspec.yaml

tambahkan pluginnya. ini mirip seperti implement pada android studio

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  fluttertoast: ^8.0.8 # <-- INI BRO

setelah itu anda tidak perlu melakukan sync. kalo di flutter otomatis setelah run

Tambahkan import di class yang anda ingin tampilkan toastnya

import 'package:fluttertoast/fluttertoast.dart';

untuk code button dan method toastny, saya menggunakan ElevatedButton

//Step 1 
ElevatedButton(
            onPressed: () {
              // Step 2 ini hasil plugin tadi
              Fluttertoast.showToast(
                  msg: "This is Center Short Toast",
                  toastLength: Toast.LENGTH_SHORT,
                  gravity: ToastGravity.CENTER,
                  timeInSecForIosWeb: 1,
                  backgroundColor: Colors.red,
                  textColor: Colors.white,
                  fontSize: 16.0);
            },
            child: const Text(
              'Show Toast Message',
              style: TextStyle(fontSize: 24),
            ),
          ),

Pembahasan:

1. simplenya pubspec.yaml anggap build.gradle pada android studio tapi ini versi flutternya

fluttertoast: ^8.0.8 # <-- INI BRO

tambahkan implemntasi baru diatas

2. import plugin ke project guna agar terdeteksi plugin yang sudah di buat

import 'package:fluttertoast/fluttertoast.dart';

3. code yang bisa anda gunakan pada plugin seperti ini, panggil Fluttertoast showToast()

Fluttertoast.showToast(
msg: "This is Center Short Toast",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);

Notes :

Plugin Toast Cara ini andabisa gunakan Android & Web Build.

tetapi jika terjadi eror pada website yang menampilkan oncomplete coba anda tutup tab browsernya lalu run kembali