Image Load

Hello world,

SnackBar adalah bagian dari Material Design yang berfungsi untuk menampilkan notifikasi atau pesan singkat dan simple yang memiliki action lanjutan berupa link atau tombol. Perbedaanya dengan Popup dan Toast hanya pada bentuk tampilannya saja. Secara fungsi hampir sama. Contoh Popup yang pernah saya buat bisa dilihat di sini dan di sini. Bentuk Snackbar kira-kira seperti berikut ini.


Oke sekarang cara membuatnya. Pertama kita buat dulu halaman yang akan menampilkan snackbar. Pada contoh ini saya buat yang sederhana saja seperti berikut.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

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

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
key: scaffoldState,
appBar: new AppBar(
title: const Text('Snackbar example app'),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: RaisedButton(
onPressed: (){
//aksi snackbar
},
child: Text("Tampilkan"),
)
),
),
);
}
}

Pada code di atas akan ada sebuah halaman yang berisi tombol RaisedButton dan ketika tombol diklik maka akan menampilkan snackbar. Oke kita lanjutkan dengan membuat snackbarnya. Untuk bisa menampilkan snackbar kita harus menambahkan GlobalKey pada halaman kita seperti berikut.

final GlobalKey<ScaffoldState> scaffoldState = new GlobalKey<ScaffoldState>();

GlobalKey yang berisi ScaffoldState di sini akan menjadi key untuk halaman/Scaffold yang ingin kita jadikan halaman yang menampilkan snackbar. Lalu kita buat fungsi void snackbar seperti berikut.

void showSnakeBar(scaffoldState, String _pesan) {
scaffoldState.currentState.showSnackBar(
new SnackBar(
content: Text(_pesan),
action: SnackBarAction(
label: 'Close',
onPressed: () {
// Action lain jika snackbar diklik
},
),
),
);
}

Aksi lain di atas bisa kita gunakan untuk memanggil void lain atau melakukan fungsi lain jika snackbar diklik. void snackbar di atas bisa kita satukan dengan halaman kita atau bisa juga kita pisahkan dengan nama file lain untuk bisa dipanggil di banyak halaman. Dan full codenya akan menjadi seperti berikut.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

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

class _MyAppState extends State<MyApp> {
final GlobalKey<ScaffoldState> scaffoldState =
new GlobalKey<ScaffoldState>();

void showSnakeBar(scaffoldState, String _pesan) {
scaffoldState.currentState.showSnackBar(
new SnackBar(
content: Text(_pesan),
action: SnackBarAction(
label: 'Close',
onPressed: () {
// Some code to undo the change.
},
),
),
);
}

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
key: scaffoldState,
appBar: new AppBar(
title: const Text('Snackbar example app'),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: RaisedButton(
onPressed: (){
showSnakeBar(scaffoldState, 'Muncul Snackbar');
},
child: Text("Tampilkan"),
)
),
),
);
}
}


Selamat mencoba