كيفية اضافة قائمة منسدله مع انميشن بإستخدام فلاتر | dropdown menu Flutter with animation

كيفية اضافة قائمة منسدله مع انميشن بإستخدام Flutter

كيفية اضافة قائمة منسدله مع انميشن بإستخدام Flutter

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


تعتبر تطبيقات الهاتف المحمول حاسمة في هذه الظاهرة حيث تتوسع الرقمنة بسرعة. قد يجد المستهلكون حلولًا لكل ما يحتاجون إليه ، من الخدمات المصرفية عبر الهاتف المحمول إلى التسوق. تتطلب كل شركة تطبيقًا لخدماتها ، و iOS و Android هما النظامان الأساسيان اللذان يمكن للشركات عرض تطبيقاتها فيهما. تنفق الشركات الكثير من الأموال لتوظيف مطورين متخصصين لإنشاء تطبيقاتهم. والآن المعركة بين تطوير تطبيق React Native و Flutter على وشك أن تبدأ! كل علامة تجارية بحاجة ماسة إلى تطوير تطبيقات الهاتف المحمول. 6.64 مليار شخص ، أو 84 في المائة من سكان العالم ، سيستخدمون الهواتف المحمولة اعتبارًا من مارس 2022 ، وفقًا لتقرير. هذا يعني أن الأعمال التجارية لديها إمكانات غير محدودة. بالتالي،




package's pubspec


dependencies:

  animated_custom_dropdown: ^1.2.2



يمكنك ايضا استخدام مكتبة cool_dropdown تقوم بنفس الوظيفة ولكن يمكنك من خلالها تخصيص اللون .

cool_dropdown: ^1.4.2

How to use animated custom dropdown in flutter easy


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


How to use animated custom dropdown in flutter easy

ui.dart


const _labelStyle = TextStyle(fontWeight: FontWeight.w600);

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

  @override
  State<PagePage> createState() => _PagePageState();
}

class _PagePageState extends State<PagePage> {
  final jobRoleCtrl = TextEditingController();

  final formKey = GlobalKey<FormState>();
  final List<String> list = ['Developer', 'Designer', 'Consultant', 'Student'];
  final jobRoleDropdownCtrl = TextEditingController(),
      jobRoleFormDropdownCtrl = TextEditingController(),
      jobRoleSearchDropdownCtrl = TextEditingController();
  
  
  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: const Text('Flutter Platform Widgets'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: ListView(
            padding: const EdgeInsets.all(16.0),
            children: [
              // dropdown having search field
              const Text('Job Roles Search Dropdown', style: _labelStyle),
              const SizedBox(height: 8),

              CustomDropdown.search(
                hintText: 'Select job role',
                items: list,
                controller: jobRoleSearchDropdownCtrl,
              ),
              const SizedBox(height: 24),
              const Divider(height: 0),
              const SizedBox(height: 24),

              // using form for validation
              Form(
                key: formKey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'Job Roles Dropdown with Form validation',
                      style: _labelStyle,
                    ),
                    const SizedBox(height: 8),
                    CustomDropdown(
                      hintText: 'Select job role',
                      items: list,
                      controller: jobRoleFormDropdownCtrl,
                      excludeSelected: false,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
  
}

فيديو الشرح



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

  1. حل مشكلة minCompileSdk (31) specified in a dependency's AAR
  2. عمل مؤشر لتتبع الخطوات في فلاتر | flutter stepper
  3.  كود منع تدوير الشاشه في التطبيقات بإستخدام فلاتر
  4.  شرح كيفية عمل post للبيانات من نوع params داخل الapi في flutter
  5. شرح كيفية استخدام الapi مع repostery في Flutter وتنظيم الكود

تعليقات