Flutter国家代码选择器插件country_code_picker_packet的使用

country_code_picker_packet 是一个简单的 Flutter 包，用于输入国际格式的电话号码。它使用了 Google 的 libphonenumber 库来实现。

示例代码

文件结构

example/
├── lib/
│   └── main.dart

示例代码

import 'package:flutter/material.dart';
import 'package:country_code_picker_packet/country_code_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.blue);

    return MaterialApp(
      title: 'Demo',
      themeMode: ThemeMode.dark,
      darkTheme: darkTheme,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('国家代码选择器演示')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CountryCode countryCode = CountryCode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // 国家代码选择器
          CountryCodePicker(
            onChanged: (value) {
              setState(() {
                countryCode = value;
              });
            },
            // 设置初始国家代码
            initialSelection: 'CN',
            showCountryOnly: false,
            showOnlyCountryWhenClosed: false,
            favorite: ['CN', 'US'],
          ),
          SizedBox(height: 20),
          // 显示选择的国家代码
          Text(
            countryCode.toString(),
            style: TextStyle(fontSize: 20),
          )
        ],
      ),
    );
  }
}

使用方法

构造函数

CountryCodePicker 的构造函数允许你设置一些参数来定制国家代码选择器的行为：

CountryCodePicker({
  Key key,
  this.onChanged,
  this.initialSelection,
  this.showCountryOnly,
  this.showOnlyCountryWhenClosed,
  this.favorite,
  this.showDropDownButton,
  this.showFlagDialog,
  this.alignLeft,
  this.padding,
  this.textStyle,
  this.flagWidth,
  this.flagHeight,
  this.showFlag,
  this.showFlagDialog,
  this.layoutBuilder,
});

参数说明

完整示例

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

import 'package:flutter/material.dart';
import 'package:country_code_picker_packet/country_code_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.blue);

    return MaterialApp(
      title: 'Demo',
      themeMode: ThemeMode.dark,
      darkTheme: darkTheme,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('国家代码选择器演示')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CountryCode countryCode = CountryCode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // 国家代码选择器
          CountryCodePicker(
            onChanged: (value) {
              setState(() {
                countryCode = value;
              });
            },
            // 设置初始国家代码
            initialSelection: 'CN',
            showCountryOnly: false,
            showOnlyCountryWhenClosed: false,
            favorite: ['CN', 'US'],
          ),
          SizedBox(height: 20),
          // 显示选择的国家代码
          Text(
            countryCode.toString(),
            style: TextStyle(fontSize: 20),
          )
        ],
      ),
    );
  }
}