Tutorial Flutter Menampilkan SnackBar Mudah dan Lengkap

Tutorial flutter snackbar with global key

Codingtive.com - Snackbar merupakan widget yang digunakan untuk menampilkan informasi  berupa pesan kepada pengguna mengenai aksi yang dilakukan, biasanya snackbar muncul pada bagian bawah layar. 

Untuk membuat Snackbar pada Flutter ada beberapa cara, pada tutorial ini kita akan belajar membuat Snackbar dengan memanfaatkan Global Key. Pastikan kamu mengikuti tutorialnya sampai selesai ya.

Berikut gambaran dari aplikasi yang akan kita buat :

Pengguna dapat menekan tombol kemudian menampilkan Snackbar yang berisi informasi dan aksi yang dapat dilakukan.

tutorial flutter snackbar

Buat project flutter

Buat project flutter atau kamu dapat menggunakan project yang sudah ada, ketika membuat project baru pastikan terkoneksi dengan internet ya.

Membuat snackbar

Buka file main.dart pada folder lib, kemudian ubah kodenya menjadi seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter SnackBar",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Flutter SnackBar"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

          ],
        ),
      ),
    );
  }
}

Setelah membuat kode dasarnya, buatlah variable global key didalam class MyApp, kodenya seperti berikut :

final GlobalKey _scaffoldKey = GlobalKey();

Tambahkan key didalam widget Scaffold yang isinya adalah variable _scaffoldKey :

return Scaffold(
  key: _scaffoldKey,
  appBar.....
  body....
);

Buat fungsi snackbar

Selanjutnya, kita akan membuat fungsi untuk menampilkan tombol dan snackbar. Pertama menampilkan simple snackbar, dan yang kedua contoh lengkap penggunaan snackbar. Tambahkan fungsi berikut didalam class MyApp setelah fungsi build().

class _MyAppState extends State<MyApp> {
  Widget build() {
   .....
  }

  Widget _buildSimpleSnackBar() {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: MaterialButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text("Learn Flutter with Codingtive.com"),
          );
          _scaffoldKey.currentState.showSnackBar(snackBar);
        },
        color: Colors.blue,
        child: Text(
          "Show Simple SnackBar",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  Widget _buildSnackBar() {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: MaterialButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text("Complete SnackBar Example"),
            duration: const Duration(milliseconds: 800),
            backgroundColor: Colors.blueAccent,
            action: SnackBarAction(
              label: "OK",
              textColor: Colors.redAccent,
              onPressed: () {
                print("OK has been clicked");
              },
            ),
          );
          _scaffoldKey.currentState.showSnackBar(snackBar);
        },
        color: Colors.blue,
        child: Text(
          "Show Complete SnackBar",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

Kemudian kita tinggal memanggil fungsinya didalam children widget Column, sehingga kodenya menjadi seperti berikut :

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    _buildSimpleSnackBar(),
    _buildSnackBar(),
  ],
),

Sekarang coba run, hasilnya seperti berikut ketika kamu menekan tombol menampilkan snackbar :

flutter snackbar tutorial

Kode Lengkap

Berikut kode lengkap pada file main.dart :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter SnackBar",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        centerTitle: true,
        title: Text("Flutter SnackBar"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _buildSimpleSnackBar(),
            _buildSnackBar(),
          ],
        ),
      ),
    );
  }

  Widget _buildSimpleSnackBar() {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: MaterialButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text("Learn Flutter with Codingtive.com"),
          );
          _scaffoldKey.currentState.showSnackBar(snackBar);
        },
        color: Colors.blue,
        child: Text(
          "Show Simple SnackBar",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  Widget _buildSnackBar() {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: MaterialButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text("Complete SnackBar Example"),
            duration: const Duration(milliseconds: 800),
            backgroundColor: Colors.blueAccent,
            action: SnackBarAction(
              label: "OK",
              textColor: Colors.redAccent,
              onPressed: () {
                print("OK has been clicked");
              },
            ),
          );
          _scaffoldKey.currentState.showSnackBar(snackBar);
        },
        color: Colors.blue,
        child: Text(
          "Show Complete SnackBar",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

Bedah Kode

Penggunaan global key digunakan untuk identitas unik dari suatu element, global key juga menyediakan akses untuk objek lainnya seperti BuildContext, StatefulWidget, dan State. Tujuannya yaitu Snackbar dapat mengakses Scaffold sebagai root widget  yang memiliki key unik dengan memanfaatkan globay key.

Perhatikan kode berikut :

child: MaterialButton(
  onPressed: () {
    final snackBar = SnackBar(
      content: Text("Learn Flutter with Codingtive.com"),
    );
    _scaffoldKey.currentState.showSnackBar(snackBar);
  },
),

Ketika tombol ditekan, kita menggunakan global key dan mengakses state untuk menampilkan snackbar. Hal ini karena ketika snackbar swipe keatas atau ditampilkan terdapat perubahan state.

final snackBar = SnackBar(
  content: Text("Complete SnackBar Example"),
  duration: const Duration(milliseconds: 800),
  backgroundColor: Colors.blueAccent,
  action: SnackBarAction(
    label: "OK",
    textColor: Colors.redAccent,
    onPressed: () {
      print("OK has been clicked");
    },
  ),
);
_scaffoldKey.currentState.showSnackBar(snackBar);

Untuk mengatur durasi waktu snackbar ditampilkan, kamu dapat mengaturnya pada bagian duration. Duration dapat menggunakan satuan waktu seperti microseconds, milliseconds, seconds, minutes dan masih banya lagi.

Kamu juga dapat mengatur warna background, dan menambahkan aksi pada Snackbar seperti contoh diatas. Ketika snackbar ditampilkan dan pengguna menekan tombol OK maka menampilkan pesan pada log. Kamu dapat menambahkan aksi lainnya didalam onPressed.

Github

Untuk kodenya juga dapat kamu pelajari pada repository github :

Github Saya

Kesimpulan

Snackbar dapat digunakan untuk menampilkan informasi atau pesan kepada pengguna mengenai aksi apa yang dilakukan. Ada beberapa cara untuk menampilkan snackbar, salah satunya dengan memanfaatkan penggunaan global key. 

Jika kamu ada pertanyaan atau mau berdiskusi dapat melalui kolom komentar, dan untuk menambah skill kamu silahkan pelajari juga artikel berikut :

Tutorial flutter bottom navigation mudah dan lengkap

Tutorial flutter membuat radio button

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: