Tampilkan SnackBar

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 10 dari 34.

SnackBar adalah pesan singkat yang muncul dari bagian bawah layar, lalu menghilang sendiri setelah sekitar empat detik. Aplikasi menggunakannya untuk memberi tahu bahwa suatu tindakan berhasil: Tersimpan, Terkirim, Dihapus.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Sent')),
);

Baca dari bagian dalam ke luar: SnackBar(...) adalah pesannya, showSnackBar menampilkannya di layar, dan ScaffoldMessenger.of(context) menemukan bagian aplikasi yang menampilkan pesan.

context adalah posisi widget di dalam pohon, yang diterima oleh build. .of(context) mencari ke atas pohon dari sana. Messenger berasal dari MaterialApp, jadi harus berada di atasmu. HomePage berada di bawah MaterialApp, jadi context-nya dapat menemukannya. Context milik MyApp berada di atasnya, dan SnackBar dari sana akan gagal dengan pesan "No ScaffoldMessenger widget found". Itulah alasan lain layar memiliki class sendiri.

Tantangan

Mudah

Saat Save ditekan, tampilkan SnackBar yang bertuliskan Note saved.

Coba sendiri

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Notes')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Save'),
        ),
      ),
    );
  }
}