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

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

flutter_country_picker_plus

flutter_country_picker_plus 是一个支持国家拨号代码的 Flutter 国家选择器组件。

使用

在布局中添加 CountryPicker 组件，并使用 onChanged 回调。你可以参考下面的完整示例代码。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 定义一个变量来存储所选国家
  Country? _selected;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Country Picker Demo'),
        ),
        body: Center(
          child: CountryPicker(
            dense: false,
            showFlag: true,  // 显示旗帜，默认为true
            showDialingCode: false, // 显示拨号代码，默认为false
            showName: true, // 显示国家名称，默认为true
            showCurrency: false, // 显示货币名称
            showCurrencyISO: true, // 显示货币ISO代码
            onChanged: (Country country) {
              setState(() {
                _selected = country;
              });
            },
            selectedCountry: _selected, // 初始选中的国家
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_country_picker_plus 是一个用于在 Flutter 应用中选择国家的插件。它提供了一个简单易用的界面，允许用户从列表中选择一个国家，并返回所选国家的相关信息，如国家代码、名称、国旗等。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  flutter_country_picker_plus: ^1.0.0  # 请使用最新版本

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

基本用法

以下是一个简单的示例，展示如何使用 flutter_country_picker_plus：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CountryPickerExample(),
    );
  }
}

class CountryPickerExample extends StatefulWidget {
  @override
  _CountryPickerExampleState createState() => _CountryPickerExampleState();
}

class _CountryPickerExampleState extends State<CountryPickerExample> {
  Country _selectedCountry;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _selectedCountry == null
                ? Text('No country selected')
                : Text('Selected Country: ${_selectedCountry.name}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _showCountryPicker(context);
              },
              child: Text('Select Country'),
            ),
          ],
        ),
      ),
    );
  }

  void _showCountryPicker(BuildContext context) {
    showCountryPicker(
      context: context,
      onSelect: (Country country) {
        setState(() {
          _selectedCountry = country;
        });
      },
    );
  }
}

参数说明

showCountryPicker 函数接受以下参数：

  • context: BuildContext，用于显示弹窗。
  • onSelect: 当用户选择一个国家时触发的回调函数，返回一个 Country 对象。
  • showWorldWide: 是否显示“Worldwide”选项，默认为 false。
  • showPhoneCode: 是否显示国家电话区号，默认为 false。
  • showCountryCode: 是否显示国家代码，默认为 false。
  • showFlag: 是否显示国旗，默认为 true。
  • searchBarDecoration: 搜索栏的装饰（如提示文本、样式等）。
  • emptySearchText: 当搜索没有结果时显示的文本。
  • favoriteCountries: 一个包含常用国家的列表，这些国家会显示在列表顶部。

自定义样式

你可以通过传递 searchBarDecoration 参数来自定义搜索栏的样式。例如：

showCountryPicker(
  context: context,
  onSelect: (Country country) {
    setState(() {
      _selectedCountry = country;
    });
  },
  searchBarDecoration: InputDecoration(
    hintText: 'Search for a country',
    border: OutlineInputBorder(),
  ),
);
回到顶部