شارك المقالة

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


شاهد أيضًا
مقالات ذات صلة
شروحات اندرويد ستوديو بالعربي : شرح putExtra وكيفية تمرير البيانات من خلاله

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

كيف تحافظ على سرية كود Flutter وتقلل حجم التطبيق في نفس الوقت

سر خطير في Flutter قد ينقذ تطبيقك من الاختراقعند نشر تطبيقات Flutter للإنتاج، يسعى المطورون…

كود بلغة الجافا يقوم بحساب مساحة الدائرة | java code that calculates the area of a circle

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

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

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