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

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

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

country_state_city_pro 是一个全新的 Flutter 插件,用于获取世界上所有的国家、州/省和城市。这些项目也是可搜索的,并且如果找不到城市,用户可以在对话框窗口中手动输入城市。

开始使用

平台支持

该小部件已成功测试于 iOS、Android 和 Chrome。

截图

Outlook Country Dialog
Outlook Country Dialog
Country Searching State Dialog
Country Searching State Dialog
City Dialog Final Data
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

1 回复

更多关于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来管理国家、州/省和城市的选择。

  1. 当选择国家时,会触发_statePickerController.fetchData(countryCode: value.code)来加载该国家下的州/省数据。
  2. 当选择州/省时,会触发_cityPickerController.fetchData(stateCode: value.code)来加载该州/省下的城市数据。

每个选择器(CountryPickerStatePickerCityPicker)都有onSelected回调,当选项被选中时会触发并打印出所选的国家、州/省或城市的名称和代码。

这个示例展示了如何使用country_state_city_pro插件来创建一个用户友好的国家、州/省和城市选择器。你可以根据需要进一步自定义和扩展这个示例。

回到顶部