Assalamualaikum teman teman, baik disini mimin akan mengasih tau nihh apa itu snackbar dan bagaimana cara menggunakannya dalam flutter? okee gasskeun
Sncakbar adalahh sebuah pesan singkat yang muncul di layar bawah hp ketika kita memencet sebuah tombol dan itu hampir mirip dengan toast.
Untuk property sendiri itu ada :
content : konten utama dari snackbar yang berisi sebuah text untuk pesan yang disampaikan
duration : berapa lama snackbar ketika muncul
actions : melakukan sebuah aksi ketika user memencet snackbar nya
elevation : Semacam shadownya
shape : bentuk dari snackbar nya
behavior : untuk men set lokasi nya
animation : untuk membuat animasinya
backgroundColor : warna background dari snackbar nya
Okee sekarang kita buat nihh contohnya, buatt proyeknya lalu di main.dart nya
di sini kita menggukan scaffold widget supaya tampilannya lebih responsive terhadap user
Scaffold(
appBar: AppBar(
title: Text(' SnackBar Example'),
),
body: SnackBarPage(),
);
Sekarang kita butuh untuk menampilkan snackbarnya dan kita buat actionnya ketika suatu tombol di pencet
onPressed: () {
final snackBar = SnackBar(
content: Text('Hallo Aku adalah Snackbar'),
duration: Duration(seconds: 5),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
},
),
);
Scaffold.of(context).showSnackBar(snackBar);
},
Ketika suatu tombol di pencet maka akan muncul snackbar dengan content nya berupa text dan bertuliskan “Hallo aku adalah Snackbar” dan akan action bertulisakan ‘Undo’ untuk kembali ke halaman sebelumnya
Untuk kode lengkapnya seperti ini
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: new ThemeData(
primaryColor: const Color(0xFF43a047),
accentColor: const Color(0xFFffcc00),
primaryColorBrightness: Brightness.dark,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter SnackBar Demo'),
),
body: SnackBarPage(),
),
);
}
}
class SnackBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text(
'Pencet Aku',
style: TextStyle(fontSize: 25.0),
),
textColor: Colors.white,
color: Colors.redAccent,
padding: EdgeInsets.all(8.0),
splashColor: Colors.grey,
onPressed: () {
final snackBar = SnackBar(
content: Text('Hallo Aku adalah Snackbar'),
duration: Duration(seconds: 5),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
},
),
);
Scaffold.of(context).showSnackBar(snackBar);
},
),
);
}
}
Untuk Outputnya akan tampil seperti ini


Sekian terima kasih, semoga bermanfaat😊