Apa itu Snackbar dan bagaimana cara menggunakannya pada flutter

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­čśŐ

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here