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

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

国家选择器插件max_country_picker

国家选择器插件max_country_picker提供了三种图标模式（圆形、方形和表情符号），并支持两种视图模式（页面模式和模态底部弹出框）。

截图

安装

安装

flutter pub add max_country_picker

导入

import 'package:max_country_picker/max_country_picker.dart';

使用

MaxCountryPicker(
  flagMode: FlagMode.square, // 设置标志模式为方形
  viewMode: ViewMode.page, // 设置视图模式为页面模式
  initialCountryCode: 'ID', // 设置初始国家代码为ID
  onCanged: (value) { // 当国家选择改变时回调
      print(value.name); // 打印所选国家的名称
  },
)

参数

CountryListConfig 参数

支持我们

您的支持可以帮助我们成长 : )

示例代码

import 'dart:developer';

import 'package:example/custom_text_field.dart';
import 'package:flutter/material.dart';
import 'package:max_country_picker/max_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(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  var countryCode = 'ID';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Column(
                children: [
                  CustomTextField(
                    label: '默认',
                    prefixWidget: MaxCountryPicker(
                      onCanged: (country) {
                        log(country.code!);
                      },
                    ),
                  ),
                  CustomTextField(
                    label: '表情模式，过滤国家 [US, ID, SG, MY, GB]',
                    prefixWidget: MaxCountryPicker(
                      flagMode: FlagMode.emoji,
                      viewMode: ViewMode.modal,
                      flagIconSize: 22,
                      initialCountryCode: countryCode,
                      countryListConfig: const CountryListConfig(
                        filterOnlyShowingCountry: ['US', 'ID', 'SG', 'MY', 'GB'],
                      ),
                      onCanged: (country) {
                        log(country.code!);
                      },
                    ),
                  ),
                  CustomTextField(
                    label: '页面模式，自定义样式',
                    prefixWidget: MaxCountryPicker(
                      flagMode: FlagMode.square,
                      viewMode: ViewMode.page,
                      flagIconSize: 22,
                      initialCountryCode: countryCode,
                      countryListConfig: CountryListConfig(
                        backgroundColor: Colors.grey[850],
                        searchBackgroundColor: Colors.grey[800],
                        countryCodeTextStyle: const TextStyle(
                            color: Colors.grey, fontWeight: FontWeight.w500),
                        countryNameTextStyle: const TextStyle(
                            color: Colors.white, fontWeight: FontWeight.w600),
                        appBarTitleTextStyle: const TextStyle(
                          color: Colors.white,
                        ),
                        appBarBackButtonColor: Colors.white,
                        searchIconColor: Colors.grey,
                        searchHintText: '搜索国家',
                        searchHintTextStyle: const TextStyle(
                            fontSize: 14, color: Colors.grey),
                        searchTextStyle: const TextStyle(
                            fontSize: 16, color: Colors.white),
                      ),
                      onCanged: (country) {
                        log(country.code!);
                      },
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}