شارك المقالة

عرض جميع الدول والمناطق المخصصه لكل دولة في Flutter


عرض جميع الدول والمناطق المخصصه لكل دولة في Flutter

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


download Countries json


How to display all Countries and cities in Flutter

قمنا هنا بعمل عدد اثنين controller واحد للدوله واخر للمدينه ولدينا اكثر من list من نوع string تحتوي على النصوص بعدها قمنا بعمل function تقوم بقراءة ملف ال json والمرور على جميع ال keys والتي تعبر عن المدن واضافتها في list وايضا لدينا function اخرى تقوم بالمرور على جميع ال values واضافتها بعد اختيار اسم الدوله كما هو موضح بالكود لديكم بالاسفل ويمكنك استخدام الكود في اي مشروع لديكم بدون ادنى مشاكل .


How to display all Countries and cities in Flutter

ui.dart


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

  @override
  State<AddressPage> createState() => _AddressPageState();
}

class _AddressPageState extends State<AddressPage> {
  TextEditingController countryController = TextEditingController();
  TextEditingController cityController = TextEditingController();
  List<String> listCountry = [];
  List<String> listCity = [];
  var myData;
  late MainBloc cubit;
  bool changeCity = false;

  @override
  void initState() {
    cubit = context.read<MainBloc>();
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: readJson(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(
            child: LoadingPage(),
          );
        } else {
          return StatefulBuilder(
            builder: (context, setState) => Padding(
              // Padding(
              padding: designApp,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    CustomDropdown.search(
                      hintText: AppString.select_country,
                      items: listCountry,
                      controller: countryController,
                      onChanged: (value) {
                        setState(() {
                          changeCity = false;
                          getCities(value);
                        });
                      },
                    ),
                    space10Vertical,
                    if (listCity.isNotEmpty)
                      CustomDropdown.search(
                        hintText: AppString.select_city,
                        items: listCity,
                        controller: cityController,
                        onChanged: (value) {
                            setState(() {
                              changeCity = true;
                            });


                        },
                      ),
                    space10Vertical,
                    myElevatedButton(
                        text: AppString.next,
                        onPressed: changeCity ? () => cubit.nextPage(true, context) : null),
                  ],
                ),
              ),
            ),
          );
        }
      },
    );
  }

  Future<void> readJson() async {
    var snapshot = await DefaultAssetBundle.of(context)
        .loadString('assets/json/new_json.json');
    myData = await json.decode(snapshot);
    myData.keys.forEach((key) {
      listCountry.add(key);
    });
  }

  Future<void> getCities(String txt) async {
    listCity.clear();
    await myData[txt].forEach((element) {
      listCity.add(element);
    });
    cityController.text = '';
  }
}


شاهد أيضًا
مقالات ذات صلة
كيفية إنشاء button 3D في Flutter | How to Generate button 3D in Flutter

كيفية إنشاء button 3D في Flutter في هذا المقال سوف نشارك معكم كيف تقوم بإنشاء…

شرح كيفية عمل انميشن للContainer وسحبه الى الخلف في فلاتر

شرح كيفية عمل انميشن للContainer وسحبه الى الخلف في فلاتر في هذا المقال سوف نشرح…

كيف تتخلص من مشاكل التخزين عند حذف التطبيق؟ الحل النهائي على Android وiOS لمطوري Flutter

الحل النهائي لمشاكل التخزين: كيف تبدأ تطبيقك من الصفر بعد الحذف على Android وiOSعند تطوير…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع