كيفية اختيار اسم الدولة والمدينه باستخدام list في Flutter بكل سهوله
استكمالا لدورة تطوير تطبيقات الاندرويد و ios في هذا الدرس نقدم لكم package جميله جدا فهي تساعدك على تحديد اسم الدوله وايضا المدينه والمنطقه من خلال هذه المكتبة الرائعه والتي تحتاج على جميع بلد العالم تقريبا وهيا عباره عن drop down تحتوي على جميع الاسماء الخاصه بالدول وايضا وبعد اختيار اسم الدوله يظهر لك امكانية لاختيار المدن التي بداخل هذه الدوله وبعد اختيار المدينه يمكنك تحديد المنطقه وكل هذا يكون من خلال هذه المكتبة كما هو موضح لكم بالصورة الخاصه بالمقال .
غالبًا ما تكون لغة Dart من Google هي الجانب الأكثر إثارة للخلاف وتميزًا في النظام الأساسي ، حيث تمثل عيبًا كبيرًا وفائدة ملحوظة لتطوير Flutter. Dart هي لغة أنشأتها Google لأول مرة في عام 2011 للاستخدام الداخلي. لكن اللغة لم تكتسب أي شكل من أشكال الشعبية لدى عامة الناس حتى ظهور Flutter. إنها الآن لغة تتوسع ببطء وبطء. اكتشف العديد من المطورين الذين يتعلمون Dart أنها تمثل تحديًا أقل جوهرية مما توقعوا. إنها تقنية سهلة التبديل من برمجة الويب أو JavaScript لأنها تم تطويرها بشكل أساسي خصيصًا للتطوير متعدد المنصات وتم تأسيسها على مبادئ وتقنيات اللغات ذات الصلة. فوائد كبيرة تأتي مع دعم جوجل.
add csc_picker to project
dependencies:
csc_picker: ^0.2.6
How to change location from flutter project by dropDown
بعد تركيب الاضافة يمكنك استخدام الكود التالي وهو يوضح كل الخطوات المتبعه لتنفيذ العملية بدون مشاكل كما هو موضح عند كل سطر يوجد comment يوضح الوظيفة التي يقوم بها , الامر بسيط جدا وواضح بالكود وهذا الكود المستخدم في الصورة الخاصه بالمقاله .
ui.dart
CSCPicker(
///Enable disable state dropdown [OPTIONAL PARAMETER]
showStates: true,
/// Enable disable city drop down [OPTIONAL PARAMETER]
showCities: true,
///Enable (get flag with country name) / Disable (Disable flag) / ShowInDropdownOnly (display flag in dropdown only) [OPTIONAL PARAMETER]
flagState: CountryFlag.DISABLE,
///Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER] (USE with disabledDropdownDecoration)
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.white,
border:
Border.all(color: Colors.grey.shade300, width: 1)),
///Disabled Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER] (USE with disabled dropdownDecoration)
disabledDropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.grey.shade300,
border:
Border.all(color: Colors.grey.shade300, width: 1)),
///placeholders for dropdown search field
countrySearchPlaceholder: "Country",
stateSearchPlaceholder: "State",
citySearchPlaceholder: "City",
///labels for dropdown
countryDropdownLabel: _countryController.text,
stateDropdownLabel: _streetController.text,
cityDropdownLabel: _cityController.text,
///Default Country
//defaultCountry: DefaultCountry.India,
///Disable country dropdown (Note: use it with default country)
// disableCountry: true,
///selected item style [OPTIONAL PARAMETER]
selectedItemStyle: TextStyle(
color: Colors.black,
fontSize: 14,
),
///DropdownDialog Heading style [OPTIONAL PARAMETER]
dropdownHeadingStyle: TextStyle(
color: Colors.black,
fontSize: 17,
fontWeight: FontWeight.bold),
///DropdownDialog Item style [OPTIONAL PARAMETER]
dropdownItemStyle: TextStyle(
color: Colors.black,
fontSize: 14,
),
///Dialog box radius [OPTIONAL PARAMETER]
dropdownDialogRadius: 10.0,
///Search bar radius [OPTIONAL PARAMETER]
searchBarRadius: 10.0,
///triggers once country selected in dropdown
onCountryChanged: (value) {
setState(() {
///store value in country variable
_countryController.text = value;
print(value);
});
},
///triggers once state selected in dropdown
onStateChanged: (value) {
setState(() {
///store value in state variable
_streetController.text = value??'';
});
},
///triggers once city selected in dropdown
onCityChanged: (value) {
setState(() {
///store value in city variable
_cityController.text = value??'';
print(value);
});
},
)
android sdk manager تحميل flutter developers applications create app android android studio mac
