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

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

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

ما الذي يجعل Flutter فريدًا جدًا؟ تعد القدرة على تطوير تطبيقات عبر الأنظمة الأساسية من قاعدة بيانات واحدة هي الجانب الأول منها. وهذا يعني أنه لا يلزم إنشاء تطبيقات الويب والجوال وسطح المكتب المميزة. باستخدام Flutter ، ظهرت أداة واحدة تسهل إنشاء التطبيقات. 19 أغسطس 2022

العيب الرئيسي لـ Flutter هو لغة التنفيذ ، Dart. إذا كنت تدير بيئات استضافة Google عبر الإنترنت أو الخلفية ، فإن Dart هي إحدى اللغات التي يمكنك استخدامها. وهذا في الأساس كل شيء.

add package :
shimmer: ^2.0.0

How to use shimmer in Flutter Project

يمكنك التعديل على الكود التالي للحصول على الشكل الذي ترغب به فالكود بسيط جدا عباره عن تصميم لتاثير التحميل يمكنك عرضه اذا كانت البيانات التي تقوم بالحصول عليها من الانترنت في حالة التحميل وهذا سوف يكون عن طريق انك تتحق من ال model الذي يتم تعبيته من الانترنت سواء من apis او firebase وعندما يتم الحصول عليه وقيمته لا تساوي null يمكنك اخفاء هذا الشريط وعرض تصميم العناصر الرئيسي لك .

shimmer.dart

class TrackLoadingTile extends StatelessWidget {
  const TrackLoadingTile({Key? key, this.itemCount = 3}) : super(key: key);
  final int itemCount;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 16.0, right: 24.0, bottom: 8.0, top: 2.0),
      child: Shimmer.fromColors(
        baseColor: Colors.white.withOpacity(.05),
        highlightColor: Colors.white.withOpacity(.25),
        child: ListView.builder(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          itemCount: itemCount,
          physics: const NeverScrollableScrollPhysics(),
          itemBuilder: (_, __) => Padding(
            padding: const EdgeInsets.only(top: 12.0, bottom: 12.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 42.0,
                  height: 42.0,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 6.0),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: Random().nextInt(125) + 100,
                      height: 18.0,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.symmetric(vertical: 2.5),
                    ),
                    Container(
                      width: Random().nextInt(75) + 75,
                      height: 18.0,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}