كيفية إنشاء bottomSheet تفاعلي مع إمكانية التمرير في Flutter لملئ الشاشه

إنشاء custom bottomSheet مع امكانية عمل سكرول لملئ الشاشه في Flutter

في هذا الجزء سوف نشرح لكم كيف تقوم بعمل bottom sheet يظهر بكامل الشاشه او جزء من الشاشه وعند السحب يكتمل وهذا سوف يكون من خلال مقالة اليوم , في هذه المقالة نقدم لكم عدد 2 من المكتبات حيث ان كل مكتبة تقوم بوظيفة معينه منها ما يقوم بفتح الشاشه بشكل كامل وعند السحب يتم الاغلاق ومنهم من يقوم بعمل bottomSheet صغير وعند السحب يصبح بملئ الشاشه كما نشاهده في بعض التطبيقات الشهيره من سناب شات وغيره من التطبيقات التي تقوم بعمل هذه الميزه في تطبيقاتهم .

وصف Flutter. تتيح مجموعة أدوات واجهة المستخدم المحمولة من Google ، Flutter ، للمطورين إنشاء تطبيقات مذهلة ومصممة محليًا من قاعدة شفرة واحدة لسطح المكتب والجوال والويب. Flutter هو برنامج مجاني ومفتوح المصدر ، ويتكامل مع الكود الحالي ، ويستخدمه المطورون والشركات في جميع أنحاء العالم. وصف Flutter. تتيح منصة Flutter مفتوحة المصدر من Google تطوير تطبيقات سطح المكتب والجوال والتطبيقات عبر الإنترنت من قاعدة كود واحدة. Flutter ، على عكس البدائل الأخرى المحبوبة ، هي مجموعة SDK كاملة ، أو مجموعة تطوير برمجيات. 04 أغسطس 2022 قدمت Google Flutter ، وهي عبارة عن حزمة SDK للجوال مفتوحة المصدر ومتعددة المنصات تتيح للمبرمجين إنشاء تطبيقات جوال لمنصتي Android و iOS من قاعدة بيانات واحدة. 10 يونيو 2022 يتم استخدام كل من Java و Flutter لإنشاء تطبيقات عبر الأنظمة الأساسية. يُطلق على إطار العمل المحمول عبر الأنظمة الأساسية Flutter.

مكتبة modal_bottom_sheet: إنشاء bottomSheet تفاعلي وقابل للتمرير في Flutter

يُعد bottomSheet عنصرًا أساسيًا في تطبيقات Flutter، حيث يسمح للمستخدمين بالتفاعل مع محتوى إضافي دون الحاجة إلى مغادرة الصفحة الحالية. ومع ذلك، يمكن أن يكون إنشاء bottomSheet باستخدام أدوات التصميم المضمنة في Flutter أمرًا صعبًا ومعقدًا.

توفر مكتبة modal_bottom_sheet طريقة سهلة وبسيطة لإنشاء bottomSheet تفاعلي وقابل للتمرير في Flutter. توفر المكتبة مجموعة متنوعة من الميزات التي تجعل إنشاء bottomSheet أمرًا سهلاً وسريعًا، بما في ذلك:

دعم التمرير: تتيح لك المكتبة إضافة عناصر متعددة إلى bottomSheet، ويمكن للمستخدمين التمرير بينها.

دعم التخصيص: تتيح لك المكتبة تخصيص مظهر وسلوك bottomSheet حسب احتياجاتك.

add package

// full screen

  modal_bottom_sheet: ^2.1.2

// half screen

  flutter_stopper: ^1.0.2

How to create custom bottom sheet in Flutter

يمكنك استخدام الكود التالي لعمل الbottom sheet و full screen ويظهر بملئ الشاشه في هذا الكود عباره عن زرين كل واحد منهم يقوم بوظيفة معينه يمكنك التعرف عليها من خلال الاكواد ومن تجربتك للكود وسوف تلاحظ بفرق معك في الاستخدام وتترك طابع لدى المستخدم بشكل فعال ولكن حاول ان تراعي اختيار الالوان المناسبة والتصميم .

ui.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_stopper/stopper.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

class myButtom extends StatelessWidget {
  const myButtom({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final h = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(title: const Text("Hello")),
      body: Builder(
        builder: (context) {
          return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                    MaterialButton(
                      color: Colors.green,
                      child: const Text("Half Screen"),
                      onPressed: () {
                        showStopper(
                          context: context,
                          stops: [0.4 * h, h],
                          builder: (context, scrollController, scrollPhysics, stop) {
                            return ClipRRect(
                              borderRadius: stop == 0
                                  ? const BorderRadius.only(
                                topLeft: Radius.circular(10),
                                topRight: Radius.circular(10),
                              )
                                  : const BorderRadius.only(),
                              clipBehavior: Clip.antiAlias,
                              child: Container(
                                color: Colors.orange,
                                child: CustomScrollView(
                                  slivers: <Widget>[
                                    const SliverAppBar(
                                      title: Text("What's Up?"),
                                      backgroundColor: Colors.orange,
                                      automaticallyImplyLeading: false,
                                      primary: false,
                                      floating: true,
                                      pinned: true,
                                    ),
                                    SliverList(
                                      delegate: SliverChildBuilderDelegate(
                                            (context, idx) => ListTile(
                                          title: const Text("Nothing much"),
                                          subtitle: Text("$idx"),
                                        ),
                                        childCount: 100,
                                      ),
                                    )
                                  ],
                                  controller: scrollController,
                                  physics: scrollPhysics,
                                ),
                              ),
                            );
                          },
                        );
                      },
                    ),
                    MaterialButton(
                      color: Colors.green,
                      child: const Text("Full screen"),
                      onPressed: (){
                        showMaterialModalBottomSheet(
                          context: context,
                          builder: (context) {
                            return const DefaultBottomSheet();
                          },
                        );
                      },
                    ),
                  ],),
    );
        }
      ),
              );
  }
}

class DefaultBottomSheet extends StatelessWidget {
  const DefaultBottomSheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final deviceHeight = MediaQuery.of(context).size.height;
    final statusBarHeight = MediaQuery.of(context).viewPadding.top;

    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: deviceHeight - statusBarHeight),
      child: SafeArea(
        top: false,
        child: ListView.builder(
          padding: EdgeInsets.zero,
          itemCount: 25,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Inner Item at $index'),
            );
          },
        ),
      ),
    );
  }
}