Tutorial Flutter Menampilkan Snackbar Menggunakan Builder

Tutorial flutter show snackbar
Tutorial flutter show snackbar
Codingtive.com - Sebelumnya ada tutorial menampilkan snackbar menggunakan Global Key, kali ini kita akan belajar menampilkan snackbar tapi menggunakan Builder. Kalau ada yang belum tahu apa itu snackbar, snackbar merupakan widget yang digunakan untuk menampilkan pesan atau informasi kepada pengguna yang biasanya muncul pada bagian bawah layar.

Untuk belajar menampilkan snackbar menggunakan builder, silahkan ikuti langkah-langkahnya sampai selesai ya.

Pertama, buat project baru atau kamu dapat menggunakan project sebelumnya. Berikut gambaran aplikasi yang akan kita buat :

Ilustrasi latihan

Terdapat 2 tombol, ketika pengguna menekan tombol akan menampilkan snackbar dengan contoh yang sederhana, dan contoh snackbar yang lengkap.
Tutorial flutter snackbar
Tutorial flutter snackbar

Membuat layout

Buka file main.dart pada folder lib, silahkan ubah semua kodenya dan kita akan membuat kode dasarnya 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> {

  Key key;

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

              ],
            ),
          );
        },
      ),
    );
  }

  Widget _buildSimpleSnackBar(BuildContext context) {

  }

  Widget _buildSnackBar(BuildContext context) {

  }
}
Fungsi _buildSimpleSnackBar() digunakan untuk membuat snackbar yang sederhana, lengkapi kodenya menjadi seperti berikut :
Widget _buildSimpleSnackBar(BuildContext context) {
  return Container(
    padding: EdgeInsets.all(8.0),
    child: MaterialButton(
      onPressed: () {
        Scaffold.of(context).showSnackBar(SnackBar(
          content: Text("This is simple snackbar"),
        ));
      },
      color: Colors.blue,
      child: Text(
        "Show Simple Snackbar",
        style: TextStyle(color: Colors.white),
      ),
    ),
  );
}
Fungsi _buildSnackBar() digunakan untuk membuat snackbar dengan contoh pengaturannya, silahkan lengkapi kodenya menjadi seperti berikut :
Widget _buildSnackBar(BuildContext context) {
return Container( padding: EdgeInsets.all(8.0), child: MaterialButton( onPressed: () { final snackbar = SnackBar( content: Text("Learn flutter with Codingtive.com"), duration: const Duration(milliseconds: 500), backgroundColor: Colors.teal, action: SnackBarAction( label: "OK", textColor: Colors.red, onPressed: () { print("OK has been clicked"); }, ), ); Scaffold.of(context).showSnackBar(snackbar); }, color: Colors.blue, child: Text( "Show Complete SnackBar", style: TextStyle(color: Colors.white), ), ), ); }
Selanjutnya tinggal kita panggil fungsi yang sudah dibuat didalam children pada widget Column, sehingga kodenya menjadi seperti berikut :
child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text("Click button to show snackbar"),
    _buildSimpleSnackBar(context),
    _buildSnackBar(context),
  ],
),
Sekarang coba run, maka hasilnya seperti berikut :
flutter snackbar
flutter snackbar

Kode Lengkap

Kode lengkap file main.dart 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> {

  Key key;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Flutter Snackbar"),
      ),
      body: Builder(
        key: key,
        builder: (context) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Click button to show snackbar"),
                _buildSimpleSnackBar(context),
                _buildSnackBar(context),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _buildSimpleSnackBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: MaterialButton(
        onPressed: () {
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text("This is simple snackbar"),
          ));
        },
        color: Colors.blue,
        child: Text(
          "Show Simple Snackbar",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  Widget _buildSnackBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: MaterialButton(
        onPressed: () {
          final snackbar = SnackBar(
            content: Text("Learn flutter with Codingtive.com"),
            duration: const Duration(milliseconds: 500),
            backgroundColor: Colors.teal,
            action: SnackBarAction(
              label: "OK",
              textColor: Colors.red,
              onPressed: () {
                print("OK has been clicked");
              },
            ),
          );
          Scaffold.of(context).showSnackBar(snackbar);
        },
        color: Colors.blue,
        child: Text(
          "Show Complete SnackBar",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

Bedah Kode

Hampir sama untuk menampilkan snackbar menggunakan builder dan Global Key, yaitu sama sama memanfaatkan penggunaan key.

Perbedaannya key yang digunakan terdapat pada widget Builder bukan Scaffold. Berikut penjelasan widget Builder :
  • builder : untuk memanggil widget turunannya.
  • key : mengontrol bagaimana satu widget menggantikan widget lainnya dalam 1 tree / hirarki.
Pada saat memanggil builder kita membutuhkan context. Kamu dapat melihat penggunaan key sebagai identitas suatu element atau widget pada kode berikut :
Key key;
Perhatikan kode berikut :
Widget _buildSnackBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: MaterialButton(
        onPressed: () {
          final snackbar = SnackBar(
            content: Text("Learn flutter with Codingtive.com"),
            duration: const Duration(milliseconds: 500),
            backgroundColor: Colors.teal,
            action: SnackBarAction(
              label: "OK",
              textColor: Colors.red,
              onPressed: () {
                print("OK has been clicked");
              },
            ),
          );
          Scaffold.of(context).showSnackBar(snackbar);
        },
        color: Colors.blue,
        child: Text(
          "Show Complete SnackBar",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}
Pada saat menekan tombol yaitu didalam onPressed kita membuat widget SnackBar dengan berbagai pengaturannya, lalu memanggil method showSnacbar() dari Scaffold. Karena dibutuhkan context, maka kita tambahkan context pada parameter.

Berikut penjelasan properties yang terdapat didalam widget SnackBar :
  • content : isi / konten dari snackbar, berupa Widget.
  • duration : mengatur durasi waktu snackbar ditampilkan, kamu dapat menggantinya dengan satuan lainnya seperti seconds, minutes, dan lainnya.
  • backgroundColor : mengatur warna backround snackbar.
  • action : aksi dari snackbar, berupa SnackBarAction 
Kamu dapat memberikan aksi ketika snackbar ditampilkan contohnya ketika kamu menekan aksi OK seperti contoh diatas akan melakukan print("OK has been clicked"). Kamu dapat menambahkan aksi lainnya didalam onPressed.

Github

Untuk kode lengkapnya juga terdapat pada repository github :

Kesimpulan

Untuk menampilkan snackbar pada Flutter ada beberapa cara, dapat menggunakan Builder dan ada yang menggunakan Global Key. Kamu dapat memilihnya sesuai kebutuhan dan yang kamu sukai, untuk mempelajari menampilkan snackbar dengan global key baca artikel berikut :

Baca juga artikel lainnya untuk menambah skill dan pengetahuan kamu, semoga bermanfaat ya.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Menampilkan Snackbar Menggunakan Builder"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel