Flutter国家、州/省、城市选择插件country_state_city的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter国家、州/省、城市选择插件country_state_city的使用

country_state_city

version NullSafety

这是一个Flutter包,用于显示全球的国家、州/省和城市列表。它还允许根据给定的国家ISO代码获取相应的州/省和城市列表。

如何使用

要使用这个包,请在pubspec.yaml中添加country_state_city作为依赖项。

dependencies:
  country_state_city: ^0.1.3

然后在你的Dart文件中导入该包:

// 导入country_state_city包
import 'package:country_state_city/country_state_city.dart';

接下来可以开始调用API来获取数据了,例如获取所有国家:

// 获取所有国家
final countries = await getAllCountries();

或者根据国家ISO代码获取一个国家的所有州/省:

// 根据国家ISO代码获取所有州/省
final states = await getStatesOfCountry('AF'); // 示例:阿富汗

APIs

函数 描述
Future<List<Country>> getAllCountries() 获取全球国家列表
Future<Country?> getCountryFromCode(String countryCode) 根据ISO代码获取国家信息
Future<List<State>> getAllStates() 获取全球州/省列表
Future<List<State>> getStatesOfCountry(String countryCode) 根据国家ISO代码获取该国的州/省列表
Future<State?> getStateByCode(String countryCode, String stateCode) 根据州/省代码及其所属国家代码获取州/省信息
Future<List<City>> getAllCities() 获取全球城市列表
Future<List<City>> getStateCities(String countryCode, String stateCode) 根据州/省代码和国家ISO代码获取该州/省的城市列表
Future<List<City>> getCountryCities(String countryCode) 根据国家ISO代码获取该国的城市列表

描述
Country 处理国家数据,如名称、ISO代码、电话区号、国旗、货币、纬度、经度、时区等
State 处理州/省数据,如名称、所属国家代码、ISO代码、纬度、经度等
City 处理城市数据,如名称、所属国家代码、所属州/省代码、纬度、经度等
Timezone 处理时区数据,如名称、GMT偏移量、GMT偏移量名称、缩写、时区名称等

完整示例代码

以下是一个完整的示例demo,展示了如何使用country_state_city插件:

import 'package:flutter/material.dart';
import 'package:country_state_city/country_state_city.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Country State City Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Country State City Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<List<Country>> countries;
  late Future<List<State>> states;
  late Future<List<City>> cities;

  @override
  void initState() {
    super.initState();
    countries = getAllCountries();
    states = getAllStates();
    cities = getAllCities();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: FutureBuilder<List<Country>>(
                future: countries,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return ListView.builder(
                      itemCount: snapshot.data!.length,
                      itemBuilder: (context, index) {
                        var country = snapshot.data![index];
                        return ListTile(
                          title: Text(country.name),
                          subtitle: Text('ISO Code: ${country.isoCode}'),
                        );
                      },
                    );
                  } else if (snapshot.hasError) {
                    return Text("${snapshot.error}");
                  }

                  // 默认加载指示器
                  return Center(child: CircularProgressIndicator());
                },
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // 获取特定国家的信息
                final country = await getCountryFromCode('CN');
                if (country != null) {
                  // 获取该国家的所有州/省
                  final countryStates = await getStatesOfCountry(country.isoCode);
                  // 获取该国家的所有城市
                  final countryCities = await getCountryCities(country.isoCode);
                  print('Country: ${country.name}');
                  print('States: ${countryStates.map((e) => e.name)}');
                  print('Cities: ${countryCities.map((e) => e.name)}');
                }
              },
              child: Text('Get Details of China'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中,我们创建了一个简单的Flutter应用程序,它首先会加载并显示所有国家的列表。用户还可以点击按钮来获取中国的详细信息,包括其所有的州/省和城市。

希望这能帮助您更好地理解和使用country_state_city插件!如果您有任何问题或需要进一步的帮助,请随时提问。


更多关于Flutter国家、州/省、城市选择插件country_state_city的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国家、州/省、城市选择插件country_state_city的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,我可以为你提供一个关于如何使用Flutter中的country_state_city插件来选择国家、州/省、城市的代码示例。这个插件能够帮助你轻松地在Flutter应用中实现地理位置的选择功能。

首先,你需要在pubspec.yaml文件中添加这个插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  country_state_city: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,是一个简单的示例代码,展示如何使用country_state_city插件来实现国家、州/省、城市的选择:

import 'package:flutter/material.dart';
import 'package:country_state_city/country_state_city.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Country, State, City Picker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Country _selectedCountry;
  StateModel _selectedState;
  CityModel _selectedCity;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country, State, City Picker'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            DropdownButtonFormField<Country>(
              value: _selectedCountry,
              hint: Text('Select Country'),
              onChanged: (newValue) {
                setState(() {
                  _selectedCountry = newValue;
                  _selectedState = null;
                  _selectedCity = null;
                });
                // Fetch states for the selected country
                fetchStatesForCountry(newValue.countryCode);
              },
              items: CountryStateCityPicker.getCountries()
                  .map<DropdownMenuItem<Country>>((Country value) {
                return DropdownMenuItem<Country>(
                  value: value,
                  child: Text(value.name),
                );
              }).toList(),
            ),
            SizedBox(height: 16),
            _selectedCountry != null
                ? DropdownButtonFormField<StateModel>(
                    value: _selectedState,
                    hint: Text('Select State'),
                    onChanged: (newValue) {
                      setState(() {
                        _selectedState = newValue;
                        _selectedCity = null;
                      });
                      // Fetch cities for the selected state
                      fetchCitiesForState(_selectedCountry.countryCode, newValue.code);
                    },
                    items: _selectedCountry.states
                        .map<DropdownMenuItem<StateModel>>((StateModel value) {
                      return DropdownMenuItem<StateModel>(
                        value: value,
                        child: Text(value.name),
                      );
                    }).toList(),
                  )
                : Container(),
            SizedBox(height: 16),
            _selectedState != null
                ? DropdownButtonFormField<CityModel>(
                    value: _selectedCity,
                    hint: Text('Select City'),
                    onChanged: (newValue) {
                      setState(() {
                        _selectedCity = newValue;
                      });
                    },
                    items: _selectedState.cities
                        .map<DropdownMenuItem<CityModel>>((CityModel value) {
                      return DropdownMenuItem<CityModel>(
                        value: value,
                        child: Text(value.name),
                      );
                    }).toList(),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }

  // Dummy function to simulate fetching states and cities
  void fetchStatesForCountry(String countryCode) async {
    // In a real scenario, you might fetch this data from an API or a local database
    List<StateModel> states = CountryStateCityPicker.getStatesByCountryCode(countryCode);
    setState(() {
      _selectedCountry?.states = states;
    });
  }

  void fetchCitiesForState(String countryCode, String stateCode) async {
    // In a real scenario, you might fetch this data from an API or a local database
    List<CityModel> cities = CountryStateCityPicker.getCitiesByCountryCodeAndStateCode(countryCode, stateCode);
    setState(() {
      _selectedState?.cities = cities;
    });
  }
}

注意

  1. 在实际应用中,你可能需要从API或本地数据库中获取国家和城市数据。这里为了简化,我们直接使用了插件提供的方法。
  2. fetchStatesForCountryfetchCitiesForState函数是模拟的,它们应该在实际应用中异步获取数据。
  3. Country, StateModel, CityModel等类型是从country_state_city插件中导入的。

这个示例展示了如何使用country_state_city插件来创建一个简单的国家、州/省、城市选择器。你可以根据自己的需求进一步定制和扩展这个示例。

回到顶部