Hiển thị SnackBar

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 10 trên 34.

SnackBar là một thông báo ngắn trượt lên từ cuối màn hình rồi tự biến mất sau khoảng bốn giây. Ứng dụng dùng thông báo này để cho biết một thao tác đã thành công: Đã lưu, Đã gửi, Đã xóa.

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

Đọc từ trong ra ngoài: SnackBar(...) là thông báo, showSnackBar hiển thị thông báo trên màn hình, còn ScaffoldMessenger.of(context) tìm phần của ứng dụng hiển thị thông báo.

context là vị trí của widget trong cây, được build nhận vào. .of(context) tìm ngược lên cây từ vị trí đó. Messenger đến từ MaterialApp, nên nó phải nằm phía trên bạn. HomePage nằm dưới MaterialApp, nên context của nó tìm thấy messenger. Context của MyApp nằm phía trên messenger, nên tạo SnackBar từ đó sẽ thất bại với thông báo "No ScaffoldMessenger widget found". Đó cũng là một lý do khiến màn hình có lớp riêng.

Thử thách

Dễ

Khi nhấn Save, hãy hiển thị SnackBar có nội dung Note saved.

Tự làm thử

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'),
        ),
      ),
    );
  }
}