Flutter国家选择器插件custom_country_picker的使用

Flutter国家选择器插件custom_country_picker的使用

简介

Custom Country Picker 是一个Flutter插件，提供了一个易于使用且高度可定制的国家选择器小部件。该插件适用于需要用户选择国家的应用程序，例如设置位置、配置电话号码或其他与国家相关的选择。

安装

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

dependencies:
  custom_country_picker: ^1.0.2

然后在需要使用的文件中导入 custom_country_picker：

import 'package:custom_country_picker/custom_country_picker.dart';

需求

此插件使用SVG格式的国家旗帜图像。如果你需要自定义显示包含图像的选择器，你需要安装 Flutter SVG：

dependencies:
  flutter_svg: ^2.0.10+1

如果你需要在输入框中自定义国家旗帜，可以使用以下代码：

SvgPicture.asset(
  country.flag,
  width: MediaQuery.of(context).size.width * 0.08,
  package: 'custom_country_picker'
)

使用方法

使用 Custom Country Picker 插件时，需要提供一些参数来确保其正常工作。以下是主要参数及其说明：

示例代码

以下是一个完整的示例代码，展示了如何使用 Custom Country Picker 插件：

import 'package:custom_country_picker/country.dart';
import 'package:flutter/material.dart';

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

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController phoneController = TextEditingController();
  TextEditingController phone1Controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.05),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 所有国家带选择器
                Text('所有国家带选择器', style: TextStyle(fontSize: MediaQuery.of(context).size.width * 0.045, fontWeight: FontWeight.bold)),
                SizedBox(height: MediaQuery.of(context).size.height * 0.005),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.15),
                  child: Stack(
                    alignment: Alignment.topLeft,
                    children: [
                      Container(
                        margin: EdgeInsets.only(top: MediaQuery.of(context).size.width * 0.035),
                        decoration: BoxDecoration(border: Border.all(color: Colors.deepPurple), borderRadius: BorderRadius.circular(10)),
                        child: CountrySelect(
                          onChanged: (Country? country) {},
                          language: 'en',
                          initial: 'CI',
                        ),
                      ),
                      Positioned(
                        left: MediaQuery.of(context).size.width * 0.03,
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.01, vertical: MediaQuery.of(context).size.width * 0.002),
                          color: Colors.white,
                          child: Text('国家', style: TextStyle(fontSize: MediaQuery.of(context).size.width * 0.035)),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: MediaQuery.of(context).size.height * 0.05),

                // 所有国家不带选择器
                Text('所有国家不带选择器', style: TextStyle(fontSize: MediaQuery.of(context).size.width * 0.045, fontWeight: FontWeight.bold)),
                SizedBox(height: MediaQuery.of(context).size.height * 0.005),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.15),
                  child: Stack(
                    alignment: Alignment.topLeft,
                    children: [
                      Container(
                        margin: EdgeInsets.only(top: MediaQuery.of(context).size.width * 0.035),
                        decoration: BoxDecoration(border: Border.all(color: Colors.deepPurple), borderRadius: BorderRadius.circular(10)),
                        child: CountrySelect(
                          onChanged: (Country? country) {},
                          language: 'fr',
                          usePicker: false,
                          initial: 'CI',
                        ),
                      ),
                      Positioned(
                        left: MediaQuery.of(context).size.width * 0.03,
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.01, vertical: MediaQuery.of(context).size.width * 0.002),
                          color: Colors.white,
                          child: Text('国家', style: TextStyle(fontSize: MediaQuery.of(context).size.width * 0.035)),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: MediaQuery.of(context).size.height * 0.05),

                // 包含所有国家的列表
                Text('包含所有国家的列表', style: TextStyle(fontSize: MediaQuery.of(context).size.width * 0.045, fontWeight: FontWeight.bold)),
                SizedBox(height: MediaQuery.of(context).size.height * 0.005),
                PhoneInputWidget(controller: phoneController, label: '电话号码'),
                SizedBox(height: MediaQuery.of(context).size.height * 0.05),

                // 包含部分国家的列表
                Text('包含部分国家的列表', style: TextStyle(fontSize: MediaQuery.of(context).size.width * 0.045, fontWeight: FontWeight.bold)),
                SizedBox(height: MediaQuery.of(context).size.height * 0.005),
                PhoneInputWidget(
                  countries: const ['CI', 'CM', 'SN', 'ML', 'BF'],
                  controller: phone1Controller,
                  label: '电话号码',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// 自定义的电话输入组件
class PhoneInputWidget extends StatelessWidget {
  final TextEditingController controller;
  final String label;
  final List<String>? countries;

  const PhoneInputWidget({
    Key? key,
    required this.controller,
    required this.label,
    this.countries,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: TextStyle(fontSize: MediaQuery.of(context).size.width * 0.035)),
        SizedBox(height: MediaQuery.of(context).size.height * 0.01),
        Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.deepPurple), borderRadius: BorderRadius.circular(10)),
          child: Row(
            children: [
              Expanded(
                child: TextField(
                  controller: controller,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.03),
                  ),
                ),
              ),
              if (countries != null)
                CountrySelect(
                  onChanged: (Country? country) {},
                  language: 'en',
                  countries: countries!,
                  initial: 'CI',
                ),
            ],
          ),
        ),
      ],
    );
  }
}