showBottomSheet

📌 ما هو showBottomSheet؟

  • هو دالة (function) تُستخدم لعرض شريط سفلي (Bottom Sheet) في التطبيق.
  • يظهر من أسفل الشاشة، ويحتوي عادةً على محتوى إضافي أو خيارات للمستخدم.
  • هناك نوعان:
    1. Persistent Bottom Sheet → ثابت يبقى ظاهر فوق محتوى الشاشة حتى يتم إغلاقه يدويًا.
    2. Modal Bottom Sheet (بواسطة showModalBottomSheet) → مؤقت ويغلق عند الضغط خارجه أو عند السحب للأسفل.
✨ الفرق بين showBottomSheet و showModalBottomSheet
الخاصيةshowBottomSheetshowModalBottomSheet
النوعPersistent (يبقى مفتوح حتى تغلقه)Modal (يُغلق عند الضغط خارج أو السحب)
الإغلاقلازم تغلقه يدويًا (بـ Navigator.pop أو controller)يُغلق تلقائي عند التفاعل
الاستخدامعند الحاجة لشريط دائم مثل مشغل موسيقىعند الحاجة لاختيار سريع أو إدخال بيانات
📌 كيف نستخدم showBottomSheet
Scaffold(
  appBar: AppBar(title: Text('Bottom Sheet Example')),
  body: Center(
    child: ElevatedButton(
      onPressed: () {
        showBottomSheet(
          context: context,
          builder: (context) {
            return Container(
              height: 200,
              color: Colors.blue[100],
              child: Center(child: Text('Hello from Bottom Sheet!')),
            );
          },
        );
      },
      child: Text('Show Bottom Sheet'),
    ),
  ),
);
PHP
📌 الخصائص (Properties) المهمة

1. context

  • مطلوب.
  • يُستخدم لتحديد مكان عرض الـBottomSheet (عادةً سياق الـScaffold).

2. builder

  • دالة تُرجع الـWidget الذي يظهر داخل الـBottomSheet.
  • مثال: builder: (context) => Container(...).

3. backgroundColor

  • لتغيير لون الخلفية.
  • مثال: backgroundColor: Colors.white.

4. elevation

  • للتحكم في الظل (Shadow) حول الشريط.
  • رقم أكبر = ظل أعمق.

5. shape

  • لتحديد شكل الحواف (مثلاً زوايا مستديرة من الأعلى).
  • مثال:
shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
)
PHP

6. clipBehavior

  • يحدد كيفية قص المحتوى الزائد عن حدود الشكل (shape).
  • مثال: clipBehavior: Clip.antiAlias.

7. التحكم بالإغلاق

عند استدعاء showBottomSheet يرجع PersistentBottomSheetController.
يمكنك استخدامه لإغلاق الشريط:

final controller = Scaffold.of(context).showBottomSheet(...);
controller.close(); // لإغلاقه
PHP
📌 مثال متكامل مع خصائص
Scaffold(
  appBar: AppBar(title: Text("Persistent Bottom Sheet")),
  body: Center(
    child: ElevatedButton(
      onPressed: () {
        showBottomSheet(
          context: context,
          backgroundColor: Colors.white,
          elevation: 10,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
          ),
          builder: (context) {
            return Container(
              height: 200,
              padding: EdgeInsets.all(16),
              child: Column(
                children: [
                  Text("This is a Bottom Sheet"),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.pop(context); // إغلاق الشريط
                    },
                    child: Text("Close"),
                  ),
                ],
              ),
            );
          },
        );
      },
      child: Text("Open Bottom Sheet"),
    ),
  ),
);
PHP
📌 استخدام showModalBottomSheet

إذا أردت شريط يغلق تلقائيًا عند الضغط خارج/السحب:

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      height: 200,
      child: Center(child: Text("Modal Bottom Sheet")),
    );
  },
);
PHP

✨ الخلاصة:

  • showBottomSheet → للشريط السفلي الثابت (يبقى مفتوح).
  • showModalBottomSheet → للشريط المؤقت (يغلق تلقائي).
  • كلاهما قابل للتخصيص من حيث اللون، الظل، الشكل، والحجم.
📌 مثال كامل باستخدام ScaffoldState + GlobalKey
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHome()));
}

class MyHome extends StatelessWidget {
  // مفتاح للتحكم في الـScaffold
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey, // ربط المفتاح بالـScaffold
      appBar: AppBar(title: Text("BottomSheet Example")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _scaffoldKey.currentState!.showBottomSheet(
              (context) {
                return Container(
                  height: 200,
                  color: Colors.amber[200],
                  child: Center(
                    child: Text(
                      "أنا BottomSheet",
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                );
              },
              backgroundColor: Colors.white,
              elevation: 10,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
              ),
            );
          },
          child: Text("إظهار BottomSheet"),
        ),
      ),
    );
  }
}
PHP

✨ ملاحظات مهمة:

  1. المفتاح (ScaffoldKey) ضروري عندما تريد استدعاء showBottomSheet من مكان خارج الـScaffold مباشرة.
  2. لو استدعيت showModalBottomSheet، ما يحتاج مفتاح — لأنه يشتغل مباشرة مع الـcontext.
  3. تقدر تحتفظ بالـPersistentBottomSheetController عشان تغلق الـBottomSheet وقت ما تحب: final controller = _scaffoldKey.currentState!.showBottomSheet(...); controller.close(); // يغلق الـBottomSheet