شارك المقالة

إخفاء الشريط العلوي 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,

        ),
      ],
    );

}



شاهد أيضًا
مقالات ذات صلة
إنشاء تاثير التحميل كفيسبوكعند تحميل البيانات من السيرفر في فلاتر | shimmer Effect in Flutter

إنشاء تاثير التحميل كفسيبوك عند تحميل البيانات من السيرفر في flutter من التأثيرات المهمه التي…

حل مشكلة default activity not found في الاندرويد ستوديو وعدم تشغيل التطبيق

  متابعي موقعنا الاعزاء مرحبا بكم في مقالة جديدة في برنامج android studio تعتبر اول…

عمل انميشن في عرض عناصر التطبيق الخاص بك في flutter بسهوله

عمل انميشن في عرض عناصر التطبيق الخاص بك في flutter بسهوله الانميشن من العناصر التي…

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

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