كيفية الحصول على الاسم و الindex الخاص بالitem من الdropDownItem
كما نعلم ان من اقوى انواع الstate management وهو الBloc وكثير من الاشخاص يعانون من استخدامه لانه اصعب الانواع تقريبا ولكنه الاقوى والذي يجعل لك التحكم بشكل افضل ولهذا نقدم لكم دروس في هذا الcubit من اجل تحسين مستواكم في استخدامه وفي هذا المقال سوف نشرح لكم dropDownItem بإستخدامه والامر بسيط جدا وغير معقد .
أصدرت Google Flutter كإطار عمل مفتوح المصدر لترميز وتطوير تطبيقات Android و iOS الأصلية. Flutter هو إطار عمل جديد نسبيًا ، حيث تم الكشف عنه كأول إصدار مستقر 1.0 في حدث Flutter Live في ديسمبر 2018.
يوفر Flutter بساطة البرمجة بأداء يشبه الأصلي ، كل ذلك مع الحفاظ على التناسق البصري عبر الأنظمة الأساسية. تم تصميم Dart ، لغة برمجة Flutter ، لتكون بديلاً لجافا سكريبت. Flutter هو ، قبل كل شيء ، مفتوح المصدر ومجاني تمامًا. على GitHub و Stack Overflow ، أصبح Flutter مرتبطًا الآن بـ React Native من حيث الشعبية. في مقال حديث ، قمنا بمقارنة مزايا وعيوب Flutter vs React Native باستخدام تسعة معايير.
How to get index from dropDownItem to cubit
هنا قمنا بعمل قائمة ثابتة تحتوي على مجموعة من النصوص واسفلها متغير يحمل القيمة 0 ومتغير اخر يحمل قيمة الindex الذي يتم اختياره وبعدها التحديد النهائي بمعنى من و الى واسفلها متغير نصي يحمل اسم المتغير وبعدها قمنا بعمل methode عندما يتم استخدامها يتم الحصول على قيمة المتغير وتخزينه بداخل المتغير الاخر الذي قمنا بعمله ف الاعلى وباقي الvoid تقوم بوظائف معينه عند اختيار هذا العنصر .
Cubit.dart
/// variables String
static const soundName = [
'الا ان اولياء الله',
'الا من تاب',
'ان يعلم الله',
'الايه الرابعة',
'الايه الخامسة',
'الايه السادسه',
];
int valueOne = 0;
int selectedSoundStart = 0;
int selectedSoundEnd = soundName.length - 1;
String nameOfSound = '';
void getSelectedSoundIndex(int soundIndex) {
valueOne = soundIndex;
debugPrint('valueOne: $valueOne');
emit(ChangeSoundIndex());
}
void changeSoundTypeStart({required int soundName}) {
// int startIndex = soundName.indexOf(soundName);
// debugPrint('startIndex -----------> $startIndex');
selectedSoundStart = soundName;
debugPrint('selectedSoundStart -----------> $selectedSoundStart');
emit(ChangeSoundType());
}
void changeSoundTypeEnd({required int soundName}) {
// valueOne = value;
selectedSoundEnd = soundName;
emit(ChangeSoundType());
}
كود الDropdownButton في الui بفلاتر
بالنسبة للكود قمنا بعمل dropDownItem من نوع int وبعدها قمنا بعمل التصميم المعين وعند الitems جعلناه يحصل على يحصل على القائمة من الcubit وبعدها asMap وبعدها entries لكي نستطيع الحصول على الindex وبعدها قمنا بتمرير النص والindex وبعدها بداخل الonChanged يتم ارسال الvalue الى الcubit ونجري عليه العمليات من الداخل كما شرحنا بالاعلى .
GeeCoders.dart
Row(
children: [
Expanded(
child: DropdownButton<int>(
style: Theme.of(context)
.textTheme
.subtitle2!
.copyWith(
color: HexColor(brownColor),
),
onChanged: (int? newValue) {
MainCubit.get(context)
.changeSoundTypeStart(
soundName: newValue!,
// value: int.parse(newValue),
);
},
underline: Container(),
items: MainCubit.soundName.asMap().entries.map(
(entry) {
int idx = entry.key;
String val = entry.value;
return DropdownMenuItem<int>(
value: idx,
child: Text(val),
);
},
).toList(),
value: MainCubit.get(context)
.selectedSoundStart,
),
),
Expanded(
child: DropdownButton<int>(
style: Theme.of(context)
.textTheme
.subtitle2!
.copyWith(
color: HexColor(brownColor),
),
onChanged: (int? newValue) {
MainCubit.get(context)
.changeSoundTypeEnd(
soundName: newValue!,
// value: int.parse(newValue),
);
},
underline: Container(),
items: MainCubit.soundName.asMap().entries.map(
(entry) {
int idx = entry.key;
String val = entry.value;
return DropdownMenuItem<int>(
value: idx,
child: Text(val),
);
},
).toList(),
value: MainCubit.get(context)
.selectedSoundEnd,
),
),
],
),
لمزيد من الشروحات :
- كيفية اضافة الwebView داخل تطبيقات الFlutter بدون مشاكل وبسهوله .
- اضافة toast لتطبيقك وكيفية التعامل معه داخل ملف components
- اضافة عداد للعناصر badges الموجوده في السلة Flutter
- كيفية استخدام animations عند تغيير الصور في flutter بسهوله
- شرح مكتبة elastic drawer لعمل تداخل بين الصور اثناء التنقل في flutter
