عرض جميع الدول والمناطق المخصصه لكل دولة في 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 واضافتها بعد اختيار اسم الدوله كما هو موضح بالكود لديكم بالاسفل ويمكنك استخدام الكود في اي مشروع لديكم بدون ادنى مشاكل .

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 = '';
  }
}