הצגת SnackBar

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 10 מתוך 34.

SnackBar היא הודעה קצרה שמחליקה כלפי מעלה מתחתית המסך ונעלמת מעצמה לאחר כארבע שניות. אפליקציות משתמשות בה כדי להודיע שפעולה הצליחה: נשמר, נשלח, נמחק.

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

קראו אותה מבפנים החוצה: SnackBar(...) היא ההודעה, showSnackBar מציגה אותה על המסך, ו-ScaffoldMessenger.of(context) מוצאת את החלק באפליקציה שמציג הודעות.

context הוא המקום של הווידג'ט בעץ, זה ש-build מקבלת. .of(context) מחפשת משם כלפי מעלה בעץ. ה-messenger מגיע מ-MaterialApp, ולכן הוא חייב להיות מעליכם. HomePage נמצאת מתחת ל-MaterialApp, ולכן ה-context שלה מוצא אותו. ה-context של MyApp נמצא מעליו, ו-SnackBar משם נכשלת עם ההודעה "No ScaffoldMessenger widget found". זו סיבה נוספת לכך שלמסך יש מחלקה משלו.

אתגר

קל

כשלוחצים על Save, הצג SnackBar שאומר Note saved.

נסו בעצמכם

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