عرض 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، لذا يعثر عليه سياقها. أما سياق MyApp فيقع فوقه، ولذلك تفشل رسالة SnackBar الصادرة منه مع ظهور «لم يتم العثور على أداة ScaffoldMessenger». وهذا سبب آخر لامتلاك الشاشة صنفها الخاص.

التحدي

سهل

عند الضغط على 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'),
        ),
      ),
    );
  }
}