Flutter国家列表选择插件list_country_picker的使用

Flutter国家列表选择插件list_country_picker的使用

插件简介

list_country_picker 是一个用于自定义国家选择的Flutter插件，支持多语言（如阿拉伯语、英语和法语）。以下是该插件的使用说明和完整示例代码。

安装

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

dependencies:
  list_country_picker: any

1. 使用IDE的GUI或命令行安装包：

$ pub get

1. 在应用中导入 list_country_picker.dart 文件：

import 'package:list_country_picker/list_country_picker.dart';

功能

• 通过国家名称或代码选择国家
• 支持阿拉伯语、英语和法语

使用方法

默认用法

ListCountryPicker(
    onCountryChanged: (value) {
        setState(() {
            _country = value;
        });
    },
    child: const Icon(Icons.arrow_drop_down),
)

阿拉伯语示例

ListTile(
    title: Text(_country?.name ?? 'إختر الدوله'),
    trailing: ListCountryPicker(
        dialogTitle: 'إختر الدوله',
        locale: const Locale('ar'),
        onCountryChanged: (value) {
             setState(() {
                _country = value;
            });
        },
        child: const Icon(Icons.arrow_drop_down),
    ),
),

英语示例

ListTile(
    title: Text(_country?.name ?? 'Select country'),
    trailing: ListCountryPicker(
        onCountryChanged: (value) {
            setState(() {
                _country = value;
            });
        },
        child: const Icon(Icons.arrow_drop_down),
    ),
),

法语示例

ListTile(
    title: Text(_country?.name ?? 'Choisissez un pays'),
    trailing: ListCountryPicker(
        dialogTitle: 'Choisissez un pays',
        locale: const Locale('fr'),
        onCountryChanged: (value) {
            setState(() {
                _country = value;
            });
        },
        child: const Icon(Icons.arrow_drop_down),
    ),
),

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 list_country_picker 插件，并支持阿拉伯语、英语和法语切换。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

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

  String selectedLang = 'ar';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("List Country Picker"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 语言选择按钮
            Row(
              children: ['ar', 'en', 'fr']
                  .map((e) => Expanded(
                        child: GestureDetector(
                          onTap: () {
                            selectedLang = e;
                            _country = null;
                            setState(() {});
                          },
                          child: Container(
                            padding: const EdgeInsets.all(16),
                            decoration: BoxDecoration(
                              color: selectedLang == e
                                  ? Colors.green
                                  : Colors.green.withOpacity(0.1),
                            ),
                            child: Text(
                              e.toString(),
                              textScaleFactor: 2,
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ),
                      ))
                  .toList(),
            ),

            // 根据选择的语言显示不同的国家选择器
            if (selectedLang == 'ar')
              ListTile(
                title: Text(_country?.name ?? 'إختر الدوله'),
                trailing: ListCountryPicker(
                  dialogTitle: 'إختر الدوله',
                  locale: const Locale('ar'),
                  onCountryChanged: (value) {
                    print(value);
                    setState(() {
                      _country = value;
                    });
                  },
                  child: const Icon(Icons.arrow_drop_down),
                ),
              ),
            if (selectedLang == 'en')
              ListTile(
                title: Text(_country?.name ?? 'Select country'),
                trailing: ListCountryPicker(
                  locale: const Locale('en'),
                  onCountryChanged: (value) {
                    setState(() {
                      _country = value;
                    });
                  },
                  child: const Icon(Icons.arrow_drop_down),
                ),
              ),
            if (selectedLang == 'fr')
              ListTile(
                title: Text(_country?.name ?? 'Choisissez un pays'),
                trailing: ListCountryPicker(
                  dialogTitle: 'Choisissez un pays',
                  locale: const Locale('fr'),
                  onCountryChanged: (value) {
                    setState(() {
                      _country = value;
                    });
                  },
                  child: const Icon(Icons.arrow_drop_down),
                ),
              ),
          ],
        ),
      ),
    );
  }
}