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

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

        ),
      ],
    );

}



تعليقات