マグネテック備忘録

Flutterアプリ開発の備忘録

【Flutter】国選択(country_picker)

country_picker

概要






準備

パッケージの追加

dependencies:
  country_picker: ^2.0.23

インポート文

import 'package:country_picker/country_picker.dart';





showCountryPicker

パラメータ

context
onSelect
  • 引数：Country型(後述)
  • 表示されたリストから国を選択したときに呼び出される。
onClosed 何も選択せずに閉じたときに呼び出される。
showPhoneCode 電話番号における国コード(日本だと81)を表示するか(デフォルトは非表示)
showSearch 検索ボックスを表示するか(デフォルトは非表示)
countryFilter 選択できる国名をListで指定する



サンプルコードと解説

サンプルコード

showCountryPicker(
  context: context,
  showPhoneCode: true, //国コードの表示(デフォルトでfalse)
  showSearch: true, //検索ボックスの表示(デフォルトでtrueなので設定しなくても可)
  countryFilter: <String>['JP', 'US'], //表示する国
  onSelect: (Country country) {}, //選択したときの処理
  onClosed: () {}, //選択せず閉じたときの処理
);


表示例と解説






日本語表示

flutter_localizationsの導入

  • flutter_localizationsパッケージを使えば国名を日本語で表示できます(ver2.0.21あたりからの機能らしいです)。
  • こちらのサイトを参考にpubspec.yamlを編集します(その他のファイルは編集せず大丈夫でした)。

www.mechengjp.com

MaterialAppの編集

  • こちらも先ほどのサイトを参考に「supportedLocales」と「localizationsDelegates」を編集して、先ほどのサンプルコードを走らせると以下のように日本語で表示されるようになります。






Country型変数

PhoneCode 国ごとの電話コード(日本なら81)
countryCode 国コード(日本ならJP)
name 英名
nameLocalized flutter_localizationsで設定した地域に合わせた名称
flagEmoji 国旗の絵文字





デモアプリ

  • 日本、アメリカ、カナダ、オーストラリア、ドイツの5か国を選択できるようにしています。
  • 選択した国は変数として保存し、名称や国旗を表示します。

サンプルコード

# 一部のみ
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  cupertino_icons: ^1.0.2
  country_picker: ^2.0.21
  country_list_pick: ^1.0.1+6




import 'package:flutter/material.dart';
import 'package:country_picker/country_picker.dart';
import 'package:flutter_localizations/flutter_localizations.dart';


void main() {

  final app = MaterialApp(
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const MyHomePage(),

    // ここを追加する。
    supportedLocales: [
      const Locale('en'),
      const Locale('ja'),
    ],
    localizationsDelegates: [
      CountryLocalizations.delegate,
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
  );

  runApp(app);
}


class MyHomePage extends StatefulWidget {

  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Country? selectedCountry;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('country picker'),
      ),

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 余白
            ElevatedButton(
              onPressed: (){
                showCountryPicker(
                  context: context,
                  countryFilter: <String>['JP', 'US', 'CA', 'AU', 'DE'],
                  onSelect: (Country country) {
                    setState(() {
                      selectedCountry = country;
                    });
                  },
                  onClosed: () {
                    // 何もせずに閉じた場合は選択を解除
                    setState(() {
                      selectedCountry = null;
                    });
                  },
                );
              },
              child: const Text('showCountryPicker'),
            ),

            // 国が選択されていた場合
            if(selectedCountry!=null)...{
              Text('---selectedCountry---'),
              Text('phoneCode = ${selectedCountry!.phoneCode}'),
              Text('countryCode = ${selectedCountry!.countryCode}'),
              Text('name = ${selectedCountry!.name}'),
              Text('nameLocalized = ${selectedCountry!.nameLocalized}'),
              Text('flag = ${selectedCountry!.flagEmoji}'),
            }
          ],
        ),
      ),
    );
  }
}



実行結果

(1) 国選択



(2) 選択後の表示