شارك المقالة
إخفاء شريط التنقل السفلي في Flutter عند التمرير

إخفاء شريط التنقل السفلي في Flutter عند التمرير

إخفاء شريط التنقل السفلي في Flutter عند تمرير قائمة مع تجنب اهتزاز الاتجاه وإعادة البناء غير الضرورية وحفظ مسار التنقل.

إخفاء شريط التنقل السفلي في Flutter عند تمرير قائمة مع تجنب اهتزاز الاتجاه وإعادة البناء غير الضرورية وحفظ مسار التنقل.

الإخفاء قرار اتجاه لا كل بكسل

راقب الاتجاه المناسب للتمرير وغيّر حالة الظهور فقط عندما تتبدل، بدل setState مع كل tick. راعِ axisDirection وRTL إذا كان التمرير أفقيًا، ولا تعتمد sign ثابتًا لكل اتجاه. استخدم حركة محدودة لا تترك مساحة سوداء تعطل المحتوى، وراعِ padding النظام أسفل الشاشة.

لا تفقد وظائف التنقل

الظهور مجددًا عند الرجوع أو وصول التركيز للزر مهم لمن لا يستعمل السحب. افصل حالة التبويب الحالي عن ظهور الشريط ولا تعيد تهيئة صفحات IndexedStack أثناء الحركة. تخلص من listener/controller الذي تملكه، واختبر لوحة المفاتيح والقائمة القصيرة وحافة البداية والنهاية والتبديل أثناء تمرير سريع.

خطوات التطبيق والشرح

شرح كيفية اخفاء appbar و bottomNavigationBar اثناء عمل scroll للصفحه

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

Flutter عبارة عن حزمة تطوير Google SDK مخصصة لبرمجة تطبيقات الهواتف الذكية التي تعمل بنظام Android و iOS ، بالإضافة إلى Fuchsia (نظام تشغيل جديد من Google). يوفر Flutter إطارًا شاملاً بلغة Dart مخصصًا لرسم واجهات تطبيقات عالية الجودة وعالية الأداء مع تزويد المطور بمجموعة من الأدوات الجاهزة التي تتيح له إنشاء تطبيقات احترافية في أقصر وقت وبأقل قدر من مجهود. Dart هي لغة برمجة تم تطويرها وتصميمها بواسطة Google وتهدف إلى إنشاء برامج وتطبيقات سريعة تعمل في مجموعة متنوعة من السياقات ، بما في ذلك بيئات Windows و Linux على أجهزة سطح المكتب وبيئات Android و IOS على الأجهزة المحمولة ، وحتى أنظمة السيارات الرقمية.

hide appbar  and bottomNavigationBar  after scroll 

بكل بساطة قمنا بعمل اكثر من متغير من نوع bool واحد للشريط العلوي واخر للسفلي واخر اثناء عملية الscroll وكل واحد منهم يختص بوظيفة محدده وتنفيذ امر معين , ايضا قمنا بعمل اكثر من void لمعرفة الscroll للاعلى ام للاسفل وبناء عليه يتم تغيير القيم كما هو موضح , وبعدها قمنا بعمل if قبل تنفيذ الامر واذا كانت الحاله الخاصه بها true فنقوم بإظهاره واذا كانت false فسوف نقوم بإخفاءه كما هو موضح بالفيديو وبالكود التالي , يمكنك استخدام الكود والتعديل عليه لتلبية احتياجك .

hide appbar  and bottomNavigationBar  after scroll

ui.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

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

class _FullPageState extends State<FullPage> {
  double bottomBarHeight = 75;
  bool isShowButton = true;
  bool isShowAppbar = true;
  bool storyCondition = false;
  bool isScrollDown = false;
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    scroll();
  }

  @override
  void dispose() {
    super.dispose();
    _scrollController.removeListener(() { });
  }

  void showBottom(){
    setState(() {
      isShowButton = true;
    });
  }

  void hideBottom() {
    setState(() {
      isShowButton = false;
    });
  }

  void scroll() {
    _scrollController.addListener(() {
      if (_scrollController.position.userScrollDirection == ScrollDirection.reverse) {
        if (!isScrollDown) {
          isScrollDown = true;
          isShowAppbar = false;
          hideBottom();
        }
      }
      if (_scrollController.position.userScrollDirection == ScrollDirection.forward) {
        if (isScrollDown) {
          isScrollDown = false;
          isShowAppbar = true;
          showBottom();
        }

      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: isShowAppbar
          ? AppBar(
        title: const Text('My Tasks'),
      )
          : PreferredSize(
        preferredSize: const Size(0.0, 0.0),
        child: Container(),
      ),
      bottomNavigationBar: SizedBox(
        height: isShowButton ? bottomBarHeight : 0,
        width: MediaQuery.of(context).size.width,
        child: isShowButton ?
        BottomNavigationBar(
          currentIndex: 0, // this will be set when a new tab is tapped
          items: const [
            BottomNavigationBarItem(
              icon:  Icon(Icons.home),
              label:  'Home',
            ),
            BottomNavigationBarItem(
              icon:  Icon(Icons.mail),
              label:  'Message',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label:  'Person',)
          ],
        )
            : Container(
          color: Colors.white,
          width: MediaQuery.of(context).size.width,
        ),
      ),
      body: listView(),
    );
  }

  Widget containterContent(int index){
    return Container(
      height: 50.0,
      color: Colors.cyanAccent,
      margin: const EdgeInsets.all(8.0),
      width: MediaQuery.of(context).size.width - 100,
      child: Center(child: Text('Item $index',
        style: const TextStyle(
          fontSize: 14.0,
        ),)),
    );
  }

  ListView listView() {
    return ListView(
      controller: _scrollController,
      children: [
        for (int i = 0 ; i<30 ; i++)
        containterContent(i),

      ],
    );
  }

}

لمزيد من المقالات


android sdk manager تحميل flutter developers applications create app android android studio mac

مرجع للتنفيذ

راجع التوثيق الخاص بهذا الموضوع وطابق إعداداته مع إصدار أدوات مشروعك. اختبر السلوك المستهدف وحالة الفشل قبل إدماج المثال في تطبيق منشور.

شاهد أيضًا
مقالات ذات صلة
🚫 مانع الإعلانات مفعل

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