Flutter国家、州/省、城市选择插件country_state_city_pro的使用
Flutter国家、州/省、城市选择插件country_state_city_pro的使用
country_state_city_pro
是一个全新的 Flutter 插件,用于获取世界上所有的国家、州/省和城市。这些项目也是可搜索的,并且如果找不到城市,用户可以在对话框窗口中手动输入城市。
开始使用
平台支持
该小部件已成功测试于 iOS、Android 和 Chrome。
截图
Outlook | Country Dialog |
---|---|
Country Searching | State Dialog |
---|---|
City Dialog | Final Data |
---|---|
使用方法
引入包
首先,在 pubspec.yaml
文件中添加 country_state_city
依赖:
dependencies:
flutter:
sdk: flutter
country_state_city: ^1.0.0
定义控制器
在 Dart 代码中定义 TextEditingController
控制器:
import 'package:country_state_city/country_state_city_picker.dart';
/// Define Controllers
TextEditingController country = TextEditingController();
TextEditingController state = TextEditingController();
TextEditingController city = TextEditingController();
初始化小部件
在你的 Flutter 应用中初始化 CountryStateCityPicker
小部件:
CountryStateCityPicker(
country: country,
state: state,
city: city,
dialogColor: Colors.grey.shade200,
textFieldDecoration: InputDecoration(
fillColor: Colors.blueGrey.shade100,
filled: true,
suffixIcon: const Icon(Icons.arrow_downward_rounded),
border: const OutlineInputBorder(borderSide: BorderSide.none)
),
),
示例代码
以下是一个完整的示例代码,展示了如何在 Flutter 应用中使用 CountryStateCityPicker
:
import 'package:flutter/material.dart';
import 'package:country_state_city/country_state_city_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Country->State->City',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
TextEditingController country = TextEditingController();
TextEditingController state = TextEditingController();
TextEditingController city = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Country->State->City'),
),
body: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
children: [
CountryStateCityPicker(
country: country,
state: state,
city: city,
dialogColor: Colors.grey.shade200,
textFieldDecoration: InputDecoration(
fillColor: Colors.blueGrey.shade100,
filled: true,
suffixIcon: const Icon(Icons.arrow_downward_rounded),
border: const OutlineInputBorder(borderSide: BorderSide.none),
),
),
SizedBox(height: 20),
Text("${country.text}, ${state.text}, ${city.text}"),
],
),
),
);
}
}
联系方式
希望这个插件能帮助你更方便地实现国家、州/省和城市的选择功能!如果有任何问题或建议,欢迎随时联系我。
更多关于Flutter国家、州/省、城市选择插件country_state_city_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter国家、州/省、城市选择插件country_state_city_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是如何在Flutter项目中使用country_state_city_pro
插件来实现国家、州/省、城市选择的代码示例。这个插件能够帮助你轻松集成一个下拉选择器来选择国家、州/省和城市。
首先,确保你已经在pubspec.yaml
文件中添加了country_state_city_pro
依赖:
dependencies:
flutter:
sdk: flutter
country_state_city_pro: ^latest_version # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
接下来是一个简单的示例代码,展示如何使用这个插件:
import 'package:flutter/material.dart';
import 'package:country_state_city_pro/country_state_city_pro.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Country, State, City Picker Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CountryStateCityPickerDemo(),
);
}
}
class CountryStateCityPickerDemo extends StatefulWidget {
@override
_CountryStateCityPickerDemoState createState() => _CountryStateCityPickerDemoState();
}
class _CountryStateCityPickerDemoState extends State<CountryStateCityPickerDemo> {
CountryPickerController _countryPickerController = CountryPickerController();
StatePickerController _statePickerController = StatePickerController();
CityPickerController _cityPickerController = CityPickerController();
@override
void initState() {
super.initState();
// 初始化国家选择器数据
_countryPickerController.fetchData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Country, State, City Picker Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Country:', style: TextStyle(fontSize: 18)),
SizedBox(height: 8),
CountryPicker(
controller: _countryPickerController,
onChanged: (value) {
// 当国家选择改变时,初始化州/省选择器数据
_statePickerController.fetchData(countryCode: value.code);
},
onSelected: (Country country) {
print('Selected Country: ${country.name}, Code: ${country.code}');
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Select Country',
),
),
SizedBox(height: 24),
Text('State/Province:', style: TextStyle(fontSize: 18)),
SizedBox(height: 8),
StatePicker(
controller: _statePickerController,
onChanged: (value) {
// 当州/省选择改变时,初始化城市选择器数据
_cityPickerController.fetchData(stateCode: value.code);
},
onSelected: (State state) {
print('Selected State: ${state.name}, Code: ${state.code}');
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Select State/Province',
),
),
SizedBox(height: 24),
Text('City:', style: TextStyle(fontSize: 18)),
SizedBox(height: 8),
CityPicker(
controller: _cityPickerController,
onSelected: (City city) {
print('Selected City: ${city.name}, Code: ${city.code}');
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Select City',
),
),
],
),
),
);
}
}
在这个示例中,我们创建了三个控制器_countryPickerController
、_statePickerController
和_cityPickerController
来管理国家、州/省和城市的选择。
- 当选择国家时,会触发
_statePickerController.fetchData(countryCode: value.code)
来加载该国家下的州/省数据。 - 当选择州/省时,会触发
_cityPickerController.fetchData(stateCode: value.code)
来加载该州/省下的城市数据。
每个选择器(CountryPicker
、StatePicker
、CityPicker
)都有onSelected
回调,当选项被选中时会触发并打印出所选的国家、州/省或城市的名称和代码。
这个示例展示了如何使用country_state_city_pro
插件来创建一个用户友好的国家、州/省和城市选择器。你可以根据需要进一步自定义和扩展这个示例。