شارك المقالة

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


شاهد أيضًا
مقالات ذات صلة
شرح كيفية تحريك و اسقاط العناصر في فلاتر | drag and drop widget in Flutter

شرح كيفية تحريك و اسقاط العناصر في فلاتر | drag and drop widget in Flutter…

شرح كيفية تكبير وتصغير الكود داخل الاندرويد ستوديو

  بسم الله الرحمن الرحيم متابعي موقعنا الاعزاء مرحبا بكم في مقالة جديدة في برنامج…

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

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

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

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