القائمة الرئيسية

الصفحات

تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه | flutter spinkit

تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه


 تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه

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


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


الثانية اداء ممتاز. يجمع Dart إلى التعليمات البرمجية الأصلية ، ويوفر Flutter عناصر واجهة المستخدم الخاصة به ، لذلك ليست هناك حاجة لاستخدام أدوات OEM. هذا يعني أن الاتصال بين التطبيق والنظام الأساسي سيكون أقل توسطًا. "Flutter هو أول SDK للجوال يتيح طرق عرض تفاعلية دون الحاجة إلى جسر JavaScript ،" كما تصفه الشركة. كل هذا يضيف إلى أوقات بدء التطبيق الأسرع ومخاوف أقل بشأن الأداء.


اضافة flutter_spinkit

قم بإضافة المكتبة التاليه في المكان المخصص لها في الاندرويد ستوديو


dependencies:

  flutter_spinkit: ^5.1.0


التعامل مع اشكال الloading وتغيير الشكل التقليدي الى مجموعه من الاشكال الجميله

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


التعامل مع اشكال الloading وتغيير الشكل التقليدي الى مجموعه من الاشكال الجميله

spinkit.dart


class CodeLess extends StatelessWidget {
  const CodeLess({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // background Color
      backgroundColor: Colors.black45,
      body: Center(
        child: SpinKitCircle(
          // size icon
          size: 140,
          // delay
          duration: const Duration(seconds: 2),
          // color of design but don't use itemBuilder to work .
          // color: Colors.amber,
          itemBuilder: (context ,index){
            // multi color mix
            final colors = [Colors.white38 , Colors.pink , Colors.amber];
            final color = colors[index % colors.length];

            // design
            return DecoratedBox(
                decoration: BoxDecoration(
                  // color
                  color: color,
                  // design icons
                  shape: BoxShape.circle
                ));
          },
        ),
      ),
    );
  }
}



كيفية تغيير ايقونه التحميل اثناء جلب البيانات من قاعدة البيانات

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


كيفية تغيير ايقونه التحميل اثناء جلب البيانات من قاعدة البيانات

loading.dart


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

  @override
  State<CodeLess> createState() => _CodeLessState();
}

class _CodeLessState extends State<CodeLess> {
  bool isLoading = false;

  @override
  Widget build(BuildContext context)=>
    // gg is Sreen Design Loading
      isLoading ?  GG():
      Scaffold(
          // background Color
          backgroundColor: Colors.white,
          body: Center(
            child: Center(
              child: SizedBox(
                width: double.infinity / 0.5,
                child: MaterialButton(
                  color: Colors.teal,
                  child: const Text('click' , style: TextStyle(color: Colors.white),),
                  onPressed: () async {
                    setState(()=> isLoading = true);
                    // code (api server , firebase , getDate ...etc)
                    await Future.delayed(const Duration(seconds:  3));
                    setState(()=> isLoading = false);
    
                  },
                ),
              ),
            )
          ),
        );
  }
  



لتغيير شكل الايقونه بأشكال اخرى مختلفه


لتغيير شكل الايقونه بأشكال اخرى مختلفه

يمكنك من هنا تغيير الشكل الى عدد كبير من الاشكال التي سوف تجدها في الموقع الخاص بالاضافة كما هو موضح استبدل الكلمة باي كلمة او شكل من الموقع كما هو موضح بالصورة .


تعليقات

التنقل السريع