Tutorial Flutter Menampilkan Snackbar Gampang Dan Lengkap

Tutorial flutter snackbar with global key

- Snackbar merupakan widget yang dipakai untuk menampilkan informasi  berupa pesan kepada pengguna mengenai agresi yang dilakukan, biasanya snackbar muncul pada bab bawah layar. 

Untuk menciptakan Snackbar pada Flutter ada beberapa cara, pada tutorial ini kita akan berguru menciptakan Snackbar dengan memanfaatkan Global Key. Pastikan kau mengikuti tutorialnya hingga selesai ya.

Berikut citra dari aplikasi yang akan kita buat :

Pengguna sanggup menekan tombol kemudian menampilkan Snackbar yang berisi info dan agresi yang sanggup dilakukan.

tutorial flutter snackbar

Buat project flutter

Buat project flutter atau kau sanggup memakai project yang sudah ada, saat menciptakan project gres pastikan terkoneksi dengan internet ya.

Membuat snackbar

Buka file main.dart pada folder lib, kemudian ubah kodenya menjadi menyerupai 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 menciptakan aba-aba dasarnya, buatlah variable global key didalam class MyApp, kodenya menyerupai berikut :

final GlobalKey _scaffoldKey = GlobalKey(); 

Tambahkan key didalam widget Scaffold yang isinya yaitu variable _scaffoldKey :

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

Buat fungsi snackbar

Selanjutnya, kita akan menciptakan fungsi untuk menampilkan tombol dan snackbar. Pertama menampilkan simple snackbar, dan yang kedua teladan 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: () {           selesai snackBar = SnackBar(             content: Text("Learn Flutter with "),           );           _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: () {           selesai 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 menyerupai berikut :

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

Sekarang coba run, kesannya menyerupai berikut saat kau menekan tombol menampilkan snackbar :

flutter snackbar tutorial

Kode Lengkap

Berikut aba-aba 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> {    selesai 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: () {           selesai snackBar = SnackBar(             content: Text("Learn Flutter with "),           );           _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: () {           selesai 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 dipakai untuk identitas unik dari suatu element, global key juga menyediakan susukan untuk objek lainnya menyerupai BuildContext, StatefulWidget, dan State. Tujuannya yaitu Snackbar sanggup mengakses Scaffold sebagai root widget  yang mempunyai key unik dengan memanfaatkan globay key.

Perhatikan aba-aba berikut :

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

Ketika tombol ditekan, kita memakai global key dan mengakses state untuk menampilkan snackbar. Hal ini alasannya saat 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, kau sanggup mengaturnya pada bab duration. Duration sanggup memakai satuan waktu menyerupai microseconds, milliseconds, seconds, minutes dan masih banya lagi.

Kamu juga sanggup mengatur warna background, dan menambahkan agresi pada Snackbar menyerupai teladan diatas. Ketika snackbar ditampilkan dan pengguna menekan tombol OK maka menampilkan pesan pada log. Kamu sanggup menambahkan agresi lainnya didalam onPressed.

Github

Untuk kodenya juga sanggup kau pelajari pada repository github :

Github Saya

Kesimpulan

Snackbar sanggup dipakai untuk menampilkan info atau pesan kepada pengguna mengenai agresi apa yang dilakukan. Ada beberapa cara untuk menampilkan snackbar, salah satunya dengan memanfaatkan penggunaan global key. 

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

Tutorial flutter bottom navigation gampang dan lengkap

Tutorial flutter menciptakan radio button

Share this post