Flutter国家代码管理插件country_code_manager的使用

Flutter国家代码管理插件country_code_manager的使用

安装

首先，将 country_code_manager 添加到您的 pubspec.yaml 文件中：

dependencies:
  country_code_manager: ^latest_version

初始化

在应用程序初始化过程中初始化 CountryCodeManager：

await CountryCodeManager.instance.init();

显示国家旗帜

使用 ShowFlag widget 显示特定国家代码的旗帜：

ShowFlag(countryCode: 'US') // Displays the flag for the United States

国家拨号码选择

显示一个 PopupMenuButton 供用户选择拨号码：

ShowDialCode(
  initialValue: '', ///Set a initial value
  onSelected: (value) {
    debugPrint(value);
  },
),

国家选择

显示一个底部弹出窗口供用户选择国家：

Country? selectedCountry = await ShowCountries.show(context);
if (selectedCountry != null) {
  // Handle the selected country (e.g., print its name)
  print(selectedCountry.name);
}

国家选择下拉菜单（替代）

也可以使用 DropdownButton 进行国家选择：

DropdownButton<String>(
  items: CountryCodeManager.instance.countries.map((Country country) {
    return DropdownMenuItem<String>(
      value: country.code,
      child: Row(
        children: [
          ShowFlag(countryCode: country.code, width: 24),
          SizedBox(width: 8),
          Text(country.name),
        ],
      ),
    );
  }).toList(),
  onChanged: (value) {
    // Handle country selection
  },
)

国家名称本地化（可选）

要使用本地化的国家名称，请在初始化时提供语言参数：

await CountryCodeManager.instance.init(Locale('en')); // English

支持的语言

支持的语言包括：af, al, dz, as, ad, ao, ai, aq, ag, ar, am, aw, au, at, az, bs, bh, bd, bb, by, be, bz, bj, bm, bt, bo, ba, bw, bv, br, io, bn, bg, bf, bi, kh, cm, ca, cv, ky, cf, td, cl, cn, cx, cc, co, km, cg, cd, ck, cr, ci, hr, cu, cy, cz, dk, dj, dm, do, ec, eg, sv, gq, er, ee, et, fk, fo, fj, fi, fr, gf, pf, tf, ga, gm, ge, de, gh, gi, gr, gl, gd, gp, gu, gt, gn, gw, gy, ht, hm, va, hn, hk, hu, is, in, id, ir, iq, ie, il, it, jm, jp, jo, kz, ke, ki, kp, kr, kw, kg, la, lv, lb, ls, lr, ly, li, lt, lu, mo, mg, mw, my, mv, ml, mt, mh, mq, mr, mu, yt, mx, fm, md, mc, mn, ms, ma, mz, mm, na, nr, np, nl, nc, nz, ni, ne, ng, nu, nf, mk, mp, no, om, pk, pw, ps, pa, pg, py, pe, ph, pn, pl, pt, pr, qa, re, ro, ru, rw, sh, kn, lc, pm, vc, ws, sm, st, sa, sn, sc, sl, sg, sk, si, sb, so, za, gs, es, lk, sd, sr, sj, sz, se, ch, sy, tw, tj, tz, th, tl, tg, tk, to, tt, tn, tr, tm, tc, tv, ug, ua, ae, gb, us, um, uy, uz, vu, ve, vn, vg, vi, wf, eh, ye, zm, zw, ax, bq, cw, gg, im, je, me, bl, mf, rs, sx, ss, xk

旗帜和本地化文件

旗帜和本地化文件来自 https://pub.dev/packages/country_code_picker

示例代码

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

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Country Code Manager Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Country Code Manager Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It that has a State object (defined below) that contains fields that affect how it looks.

  // This class is the configuration for the state. It that holds values (in this case the title) provided by the parent (in this case the App widget) and used by the build method of the State. Fields in a Widget subclass are always marked "final".

  final String title;

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

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

  [@override](/user/override)
  void initState() {
    CountryCodeManager.instance.init();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                final result = await ShowCountries.show(context);
                if (result != null {
                  setState(() {
                    selectedCountry = result;
                  });
                }
              },
              child: const Text('Show Countries'),
            ),
            const SizedBox(height: 20),
            Text(selectedCountry?.name ?? ''),
            const SizedBox(height: 20),
            ShowFlag(countryCode: selectedCountry?.code ?? 'US'),
            const SizedBox(height: 20),
            ShowDialCode(
              initialValue: selectedCountry?.dialCode,
              onSelected: (value) {
                debugPrint(value);
              },
            ),
          ],
        ),
      ),
    );
  }
}