Home Flutter Apa itu Snackbar dan bagaimana cara menggunakannya pada flutter

Apa itu Snackbar dan bagaimana cara menggunakannya pada flutter

0
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😊