Cara Mudah Membuat Snackbar pada Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat notifikasi snackbar di flutter, cepat dan mudah. Penasaran?, ayo ikuti selengkapnya di bawah ini.

Snackbar adalah notifikasi yang biasanya digunakan pada aplikasi mobile untuk memberitahukan sesuatu. Snackbar biasanya muncul di bagian bawah layar, dan hanya tampil beberapa saat saja. Flutter juga menyediakan widget ini untuk membuat pemberitahuan yang menambah pengalaman pengguna. Caranya mudah, silahkan ikuti langkah-langkahnya di bawah ini.

Baca Artikel Lain ✨

📰 1. Membuat Aplikasi Berita dari Blogger API di Flutter read more

📰 2. Menampilkan Video Youtube Populer di Aplikasi Flutter dengan Youtube API read more

📰 3.Membuat Aplikasi Berita dengan API Wordpress read more

📰 4. Menggunakan State Management Provider pada Aplikasi Todo List Flutter read more

Cara Membuat Snackbar di Flutter

1. Pertama, buatlah sebuah project flutter baru dengan nama yang kalian inginkan. Gunakan flutter versi terbaru. Flutter yang saya gunakan saat ini adalah flutter versi 3+.

2. Buka file main.dart lalu ubah scriptnya dengan script yang ada di bawah ini.

// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  // Function untuk menampilkan Snackbar
  void _showSnackbar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Ini adalah Snackbar!'),
      action: SnackBarAction(
        label: 'Tutup',
        onPressed: () {
          // Aksi yang akan dijalankan saat tombol "Tutup" di Snackbar diklik.
        },
      ),
    );

    // Menampilkan Snackbar menggunakan ScaffoldMessenger
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contoh Snackbar'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Memanggil fungsi _showSnackbar saat tombol diklik
            _showSnackbar(context);
          },
          child: Text('Tampilkan Snackbar'),
        ),
      ),
    );
  }
}

3. Sekarang coba kalian jalankan aplikasinya melalui emulator. Jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.

Sekarang kalian bisa membuat snackbar di flutter dengan mudah. Kalian bisa melakukan improvisasi dengan menambahkan widget snackbar pada aksi tertentu. Seperti notifikasi saat data berhasil diinput atau notifikasi saat data berhasil dihapus. Penambahan snackbar pada sebuah apikasi dapat meningkatkan kenyamanan pengguna. Karena aplikasi dapat memberikan informasi tentang suatu aksi yang dilakukan.

Sekian tutorial singkat kali ini tentang cara cepat membuat snackbar pada flutter. Semoga tutorial singkat ini bermanfaat, jika ada kendala silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima kasih.