Flutter国家信息选择插件country_info_picker的使用

Flutter国家信息选择插件country_info_picker的使用

一个用于从列表中选择国家的Flutter插件，具有国家名称、国旗、拨号代码、国家代码、国籍以及手机号码最大长度等功能。

特性

• 显示国家国旗。
• 显示国家拨号代码。
• 显示国家代码。
• 显示国家名称。
• 显示国籍。
• 显示手机号码最大长度。
• 从列表中选择国家。
• 获取所选国家的信息。

开始使用

在pubspec.yaml文件中添加插件：

dependencies:
  country_info_picker: ^0.0.1

在你的Dart文件中导入该插件：

import 'package:country_info_picker/country_info_picker.dart';

使用CountryInfoPicker小部件：

CountryInfoPicker(
  onChanged: (CountryInfoModel country) {
    print('Select country: ${country.toLongString()}');
  },
);

示例

以下是一个完整的示例代码，展示了如何在应用中使用country_info_picker插件：

import 'package:flutter/material.dart';
import 'package:country_info_picker/country_info_picker.dart';
import 'package:flutter/services.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Country Info Picker Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CountryInfoModel? selectedCountry;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Country Info Picker"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Selected Country: ${selectedCountry?.name ?? 'None'}',
              style: Theme.of(context).textTheme.headline6,
            ),

            // 选择国家代码并输入手机号码
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 35),
              child: IntrinsicHeight(
                child: Row(
                  children: [
                    Expanded(
                      flex: 2,
                      child: CountryInfoPicker(
                        favorite: const ['+20', '+966'],
                        initialSelection: 'EG',
                        onChanged: (CountryInfoModel value) {
                          setState(() {
                            selectedCountry = value;
                          });
                        },
                      ),
                    ),
                    const SizedBox(width: 10),
                    Expanded(
                      flex: 7,
                      child: TextFormField(
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly,
                          LengthLimitingTextInputFormatter(selectedCountry?.maxLength),
                        ],
                        keyboardType: TextInputType.phone,
                        decoration: InputDecoration(
                          hintText: selectedCountry?.hintPhone,
                          labelText: "Mobile Number *",
                          prefixIcon: const Icon(
                            Icons.phone,
                            color: Colors.deepPurple,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),

            // 选择你的国家
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
              child: CountryInfoPicker(
                countryPickerType: CountryPickerType.CountryOnly,
                floatingLabelAlignment: FloatingLabelAlignment.start,
                suffixIcon: const Icon(
                  FontAwesomeIcons.chevronDown,
                  color: Color.fromRGBO(51, 71, 96, 0.4),
                  size: 17,
                ),
                favorite: const ['SA', 'EG'],
                onChanged: (CountryInfoModel value) {
                  // 可以在这里处理选择的国家
                },
              ),
            ),

            // 选择你的国籍
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
              child: CountryInfoPicker(
                countryPickerType: CountryPickerType.NationalityOnly,
                floatingLabelAlignment: FloatingLabelAlignment.start,
                suffixIcon: const Icon(
                  FontAwesomeIcons.chevronDown,
                  color: Color.fromRGBO(51, 71, 96, 0.4),
                  size: 17,
                ),
                favorite: const ['SA', 'EG'],
                onChanged: (CountryInfoModel value) {
                  // 可以在这里处理选择的国籍
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}