شارك المقالة

إخفاء الشريط العلوي appbar اثناء scroll في flutter


إخفاء الشريط العلوي appbar اثناء scroll في flutter


كثير من التطبيقات الموجوده بشكل كبير جدا على المتجر توفر ميزة اخفاء الشريط العلوي والسفلي عند عمل scrollig في التطبيق ولكن هل سالت نفسك كيف تتم هذه العملية ؟ وهل الامر صعب لتنفيذ هذه العملية او هل يوجد مكتبات في flutter تقوم بهذه العملية , في البداية الامر لا يحتاج منك ان تبحث على اي مكتبات حول هذه القضية وذلك لان الامر بسيط جدا وغير صعب تماما وحاول دائما ان لا تجعل كل حياتك في البرمجه عباره عن مكتبات واضافات لان مصمم الاضافه يقوم بتنفيذها لتلبية احتياجاته وقد يختلف الامر معك في بعض الاحيان وسبق وشرحنا لكم هذه العملية في درس سابق ولكن اليوم سوف نشرح لكم اخفاء الappbar فقط مع انميشن في عملية الظهور والاختفاء كما هو موضح بالصورة الخاصه بالمقال .

تنتج مجموعة أدوات تطوير Flutter تطبيقات الهاتف المحمول ثنائية الأبعاد مع جميع الأجراس والصفارات وجماليات العلامات التجارية الممتازة. Alibaba وتطبيق AdWords هما مثالان فقط لتطبيقات الجوال التي تعمل بنظام Flutter.
الآن إطار عمل معروف ، Flutter لتطوير تطبيقات الهاتف المحمول لديه القوة لإنشاء العديد من تطبيقات الويب بنجاح وبتكلفة معقولة والتي تستجيب بشكل أسرع عبر جميع أحجام الشاشات.
يرمز Flutter ، إطار عمل Google ، إلى “جعل تطوير التطبيقات أمرًا بسيطًا!”
إذا كنت مهتمًا بدمج هذه المزايا في تطبيق الهاتف المحمول الخاص بك ، فيمكنك الاستفاده من موقعنا في انجاز اعمالك بشكل اسرع ودائما تذكر ان لا شيء في العالم الذي نعيش فيه اصبح صعب


hide appbar in flutter



في البداية سوف نجعل التصميم الخاص بنا بداخل الCustomScrollView وبداخلها نضع الSliverAppBar و SliverList والان بداخل الSliverAppBar سوف نقوم فقط بتفعيل خاصية الfloating: true وهيا التي سوف تسمح لنا بإخفاء الappbar عند عمل سكرول للاسفل ويظهر عندما نقوم بعمل سكرول للاعلى كما هو موضح بالصورة الخاصه بالمقاله .

hide appbar in flutter



ui.dart

class FullPage extends StatefulWidget {
  const FullPage({Key? key}) : super(key: key);

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(floating: true,),
          SliverList(
            delegate: SliverChildListDelegate(
            [
              Container(
                width: double.infinity,
                child: buildContainer(),
              ),
            ]
          ),
          )
        ],
      ),
    );
  }
  Widget buildContainer() =>
     Column(
      children: [
        Container(
          height: 200,
          color: Colors.orangeAccent,
        ),
        Container(
          height: 200,
          color: Colors.redAccent,
        ),
        Container(
          height: 200,
          color: Colors.red,
        ),
        Container(
          height: 200,
          color: Colors.grey,

        ),
        Container(
          height: 200,
          color: Colors.green,
        ),
        Container(
          height: 200,
          color: Colors.purpleAccent,

        ),
        Container(
          height: 200,
          color: Colors.brown,

        ),
      ],
    );

}



شاهد أيضًا
مقالات ذات صلة
شرح بسيط لمفهوم viewModel و hilt في Kotlin compose

 حقن التبعيات في Android: لماذا Hilt هو الحل الأمثل؟ كيف تجعل كود Android أكثر نظافة…

تخصيص عرض اختيار التاريخ في flutter الى reel كاجهزة ios

تخصيص عرض اختيار التاريخ في flutter الى reel كاجهزة ios في هذا المقال سوف نشرح…

كود بايثون لارسال واستقبال البيانات بين clinet و server باستخدام مكتبة socket

كود بايثون لارسال واستقبال البيانات بين clinet و server باستخدام مكتبة socket  تعد مكتبة socket…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع