شارك المقالة

عرض جميع الدول والمناطق المخصصه لكل دولة في 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 = '';
  }
}


شاهد أيضًا
مقالات ذات صلة
تعرف على شرح Adapter Design Pattern بالتفصيل مع مثال عملي في Java لتحويل البيانات بين XML وJSON، مع توضيح المميزات والعيوب ومتى يُستخدم نمط المحول.
شرح Adapter Design Pattern بالتفصيل مع مثال Java ومعرفة المميزات والعيوب

شرح Adapter Design Pattern بالتفصيل مع مثال توضيحي ومعرفة العيوب والمميزات يُعد Adapter Design Pattern…

الفرق بين Null وUndefined في JavaScript

الفرق بين Null و Undefined في JavaScript: فهم دقيق لكتابة أكواد فعالةفي عالم لغة البرمجة…

كيفية عرض PDF view داخل برنامج اندرويد ستوديو وعمل RecyclerView لعرض اكثر من pdf .

  قد تساعدك فكرة اليوم في تطوير تطبيقات الاندرويد والربح منها فكثير يبحث على مطور…

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

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