Flutter国家选择器插件country_picker_plus的使用

Country Picker Plus 🌎

Country Picker Plus 是一个Flutter插件，用于显示全球的国家、州和城市列表。它还提供了搜索功能，方便用户查找特定的国家、州或城市。

Sample 1	Sample 2	Sample 3	Sample 4

Getting Started

STEP ONE: 添加依赖

请将 country_picker_plus 添加到您的 package 依赖中：

flutter pub add country_picker_plus

STEP TWO: 导入包

在您想要使用的文件中导入相应的包：

import 'package:country_picker_plus/country_picker_plus.dart';

How to use

该插件提供了两种主要方法供您根据需求使用：

使用主包：默认创建三个字段（国家、州、城市），您可以根据需要设计这些字段。

示例代码：

CountryPickerPlus(
  isRequired: true,
  countryLabel: "Country",
  countrySearchHintText: "Search Country",
  countryHintText: "Tap to Select Country",
  stateLabel: "State",
  stateHintText: "Tap to Select State",
  cityLabel: "City",
  cityHintText: "Tap to Select City",
  bottomSheetDecoration: bottomSheetDecoration,
  decoration: fieldDecoration,
  searchDecoration: searchDecoration,
  onCountrySaved: (value) {},
  onCountrySelected: (value) {},
  onStateSelected: (value) {},
  onCitySelected: (value) {},
),

隐藏字段直到前一个字段被选择：在主包类中使用以下属性：
```
hideFields: true,
```

单独使用每个字段：

示例代码：

CountryPickerPlus.country(...);
CountryPickerPlus.state(country:'COUNTRY_NAME',....);
CountryPickerPlus.city(country:'COUNTRY_NAME',state:'STATE_NAME',...);

Additional information

此包由 Ali Hosseini 开发。如果您遇到任何问题，请通过 GitHub repository 报告。

完整示例Demo

下面是一个完整的示例，展示了如何使用 Country Picker Plus 插件：

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CountryPickerPlusView(),
    ),
  );
}

class CountryPickerPlusView extends StatelessWidget {
  CountryPickerPlusView({super.key});

  final _formKey = GlobalKey<FormState>();

  void _onSubmit() {
    if (_formKey.currentState?.validate() == true) {
      _formKey.currentState?.save();
    }
  }

  @override
  Widget build(BuildContext context) {
    var fieldDecoration = CPPFDecoration(
      labelStyle: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
      hintStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
      margin: const EdgeInsets.all(10),
      suffixColor: Colors.deepOrangeAccent,
      innerColor: Colors.deepOrangeAccent.withOpacity(0.06),
      filled: true,
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: Colors.deepOrangeAccent),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: Colors.red),
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(color: Colors.deepOrangeAccent.withOpacity(0.2)),
      ),
    );

    final bottomSheetDecoration = CPPBSHDecoration(
      closeColor: Colors.deepOrangeAccent,
      itemDecoration: BoxDecoration(
        color: Colors.grey.withOpacity(0.03),
        borderRadius: BorderRadius.circular(8),
      ),
      itemsPadding: const EdgeInsets.all(8),
      itemsSpace: const EdgeInsets.symmetric(vertical: 4),
      itemTextStyle: const TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.w400,
      ),
      shape: RoundedRectangleBorder(
        side: BorderSide(color: Colors.grey.withOpacity(0.1)),
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
    );

    final searchDecoration = CPPSFDecoration(
      height: 45,
      padding: const EdgeInsets.symmetric(
        vertical: 2,
        horizontal: 10,
      ),
      filled: true,
      margin: const EdgeInsets.symmetric(vertical: 8),
      hintStyle: const TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.w400,
      ),
      searchIconColor: Colors.white,
      textStyle: const TextStyle(color: Colors.white, fontSize: 12),
      innerColor: Colors.deepOrangeAccent,
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(10),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(10),
      ),
    );

    return Scaffold(
      persistentFooterButtons: [
        Container(
          margin: const EdgeInsets.all(20),
          width: double.infinity,
          height: 50,
          child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.deepOrangeAccent,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30))),
              onPressed: _onSubmit,
              child: const Text("Submit Data")),
        )
      ],
      appBar: AppBar(
        backgroundColor: Colors.deepOrangeAccent,
        title: const Text("Country Picker Plus"),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            CountryPickerPlus(
              // hideFields: true,
              isRequired: true,
              countryLabel: "Country",
              countrySearchHintText: "Search Country",
              countryHintText: "Tap to Select Country",
              stateLabel: "State",
              stateHintText: "Tap to Select State",
              cityLabel: "City",
              cityHintText: "Tap to Select City",
              bottomSheetDecoration: bottomSheetDecoration,
              decoration: fieldDecoration,
              searchDecoration: searchDecoration,
              onCountrySaved: (value) {
                print(value);
              },
              onCitySaved: (value) {
                print(value);
              },
              onStateSaved: (value) {
                print(value);
              },
              onCountrySelected: (value) {
                print(value);
              },
              onStateSelected: (value) {
                print(value);
              },
              onCitySelected: (value) {
                print(value);
              },
            ),
          ],
        ),
      ),
    );
  }
}

以上是关于 Country Picker Plus 插件的详细介绍及使用示例。希望对您有所帮助！

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

wuwangju 1楼•21 小时前

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

当然，以下是如何在Flutter项目中使用country_picker_plus插件的示例代码。country_picker_plus是一个流行的Flutter插件，用于在应用中实现国家选择器。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加country_picker_plus的依赖：

dependencies:
  flutter:
    sdk: flutter
  country_picker_plus: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

2. 导入插件

在你的Dart文件中导入country_picker_plus：

import 'package:country_picker_plus/country_picker_plus.dart';

3. 使用插件

以下是一个简单的例子，展示如何在你的Flutter应用中使用country_picker_plus插件：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String? selectedCountryCode;
  String? selectedCountryName;
  String? selectedCountryDialCode;
  String? selectedCountryFlagEmoji;

  void _pickCountry() async {
    final result = await CountryPickerPlus.withLanguage("en").pickCountry();
    if (result != null) {
      setState(() {
        selectedCountryCode = result.countryCode;
        selectedCountryName = result.name;
        selectedCountryDialCode = result.dialCode;
        selectedCountryFlagEmoji = result.flagEmoji;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country Picker Plus Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Selected Country Code: ${selectedCountryCode ?? 'N/A'}'),
            Text('Selected Country Name: ${selectedCountryName ?? 'N/A'}'),
            Text('Selected Country Dial Code: ${selectedCountryDialCode ?? 'N/A'}'),
            Text('Selected Country Flag Emoji: ${selectedCountryFlagEmoji ?? 'N/A'}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickCountry,
              child: Text('Pick Country'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

添加依赖：在pubspec.yaml中添加country_picker_plus的依赖。
导入插件：在Dart文件中导入country_picker_plus。
使用插件：
- 创建一个按钮，当点击时调用_pickCountry方法。
- _pickCountry方法使用CountryPickerPlus.withLanguage("en").pickCountry()打开一个对话框让用户选择国家。
- 选择结果返回后，更新UI以显示选择的国家代码、名称、拨号代码和国旗表情符号。

这样，你就可以在你的Flutter应用中集成并使用country_picker_plus插件了。如果你需要更多的功能，比如过滤国家、设置默认国家等，可以参考country_picker_plus的官方文档。