Flutter拨号盘国家代码选择器插件dialcodeselector的使用

Flutter拨号盘国家代码选择器插件dialcodeselector的使用

dialcodeselector Package

dialcodeselector 是一个用于选择国家或国家拨号代码的包。

Screens

pubspec.yaml

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  dialcodeselector: <last version>

import

在你的 Dart 文件中导入 dialcodeselector 包：

import 'package:dialcodeselector/dialcodeselector.dart';

Simple example

下面是一个简单的示例，展示如何使用 dialcodeselector 包来选择国家和国家代码。

// 定义默认国家
Country? defaultCountry = DialCodeSelector.getCountryByDialCode(dialCode: "233");

// 实现回调函数
void onCountrySelected(Country? country) {
  defaultCountry = country;
  setState(() {});
}

// 定义主题以自定义国家代码选择器的外观
DialCodeSelectorTheme get selectorTheme => 
    DialCodeSelectorTheme(titleColor: Colors.blueGrey);

void showCountryPicker() async {
  await DialCodeSelector.selectCountry(context,
      selectorTheme: selectorTheme,
      initialShortName: defaultCountry?.countryShortName,
      onCountrySelected: onCountrySelected);
}

Features

• 选择国家拨号代码
• 选择国家
• 返回所选国家的名称、标志、短名和拨号代码
• 通过短名获取国家
• 通过拨号代码获取国家

完整示例 Demo

以下是完整的示例代码，展示如何在 Flutter 应用程序中集成 dialcodeselector 包。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化国家列表
  await DialCodeSelector.init();
  runApp(const MyApp());
}

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

  // 这个小部件是应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Package Example App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeView(),
    );
  }
}

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

  [@override](/user/override)
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  String? initialCountrCode;

  // 设置默认国家（使用国家拨号代码或短名）
  Country? selectedCountry = DialCodeSelector.getCountryByDialCode(dialCode: "233");

  // 定义主题以自定义国家代码选择器的外观
  DialCodeSelectorTheme get selectorTheme => DialCodeSelectorTheme(
    emptySearchResultsView: const Text("Nothing Found"),
    showCountriesOnly: true,
    titleColor: Colors.blueGrey,
  );

  // 实现回调函数
  void onCountrySelected(Country? country) {
    selectedCountry = country;
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Home")),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25),
        child: Center(
          child: TextFormField(
            decoration: InputDecoration(
              hintText: "Enter phone number",
              prefixIcon: MaterialButton(
                padding: EdgeInsets.zero,
                elevation: 0,
                highlightElevation: 0,
                onPressed: () async {
                  await DialCodeSelector.selectCountry(context,
                      selectorTheme: selectorTheme,
                      initialShortName: selectedCountry?.countryShortName,
                      onCountrySelected: onCountrySelected);
                },
                child: Row(mainAxisSize: MainAxisSize.min, children: [
                  const SizedBox(width: 11),
                  Image.asset(selectedCountry?.icon ?? "", height: 21, width: 21),
                  const SizedBox(width: 5),
                  const Icon(Icons.arrow_drop_down),
                  const SizedBox(width: 7),
                  Padding(
                    padding: const EdgeInsets.only(right: 13),
                    child: Text(selectedCountry?.dialCode ?? "", style: const TextStyle(color: Colors.black, fontSize: 16)),
                  )
                ]),
              ),
            ),
            onChanged: (String value) {},
          ),
        ),
      ),
    );
  }
}