Flutter国际化手机号码输入插件intl_mobile_field的使用

International Mobile Number Field Package

这是一个定制的Flutter TextFormField，用于输入带有国家代码的国际手机号码。该包受intl_phone_field启发，但原包自2023年中以来未进行更新维护。因此我们决定创建一个新包，包含更多功能，使其更加灵活和兼容。如果您想了解该包的更新内容，请查阅CHANGELOG.md文件。

Installing

要使用这个包：

• 运行命令：

  flutter pub add intl_mobile_field
  

• 或者，在您的pubspec.yaml文件中添加以下内容：

  dependencies:
    intl_mobile_field: ^<latest_version>
  

有时您可能想要使用最新版本的包，而不是已发布的版本。为此，请使用git语法：

dependencies:
  intl_mobile_field:
    git:
      url: https://github.com/MdAshrafUllah/intl_mobile_field.git
      ref: master

How to Use

简单地创建一个IntlMobileField widget，并传递所需的参数即可。

示例1（无收藏）

IntlMobileField(
  decoration: const InputDecoration(
    labelText: 'Mobile Number',
    border: OutlineInputBorder(
      borderSide: BorderSide(),
    ),
  ),
  initialCountryCode: 'BD',
  disableLengthCounter: true,
  languageCode: "en",
),

示例2（有收藏 - 样式一）

IntlMobileField(
  favorite: const ['BD', 'US', 'MY'],
  favoriteIcon: Icon(
    Icons.star,
    color: Colors.amber,
  ),
  favoriteIconIsLeft: false,
  decoration: const InputDecoration(
    labelText: 'Mobile Number',
    border: OutlineInputBorder(
      borderSide: BorderSide(),
    ),
  ),
  initialCountryCode: 'BD',
  disableLengthCounter: true,
  languageCode: "en",
  onChanged: (mobile) {
    log(mobile.completeNumber);
  },
  onCountryChanged: (country) {
    log('Country changed to: ${country.name}');
  },
),

示例3（有收藏 - 样式二）

IntlMobileField(
  favorite: const ['BD', 'US', 'MY'],
  favoriteIcon: Icon(
    Icons.favorite,
    color: Colors.pinkAccent,
  ),
  countryCodePositionRight: false,
  favoriteIconIsLeft: false,
  decoration: const InputDecoration(
    labelText: 'Mobile Number',
    border: OutlineInputBorder(
      borderSide: BorderSide(),
    ),
  ),
  pickerDialogStyle: PickerDialogStyle(
      countryCodeStyle:
          TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
  initialCountryCode: 'BD',
  disableLengthCounter: true,
  languageCode: "en",
),

对于PickerDialogStyle，您需要从import 'package:intl_mobile_field/country_picker_dialog.dart';导入它。

完整示例Demo

下面是一个完整的示例demo，展示了如何在项目中集成并使用IntlMobileField组件。

import 'dart:developer';

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<FormState> _formKey = GlobalKey();
  final TextEditingController controller = TextEditingController();

  FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mobile Field Example'),
          backgroundColor: Colors.blueAccent,
          foregroundColor: Colors.white,
          centerTitle: true,
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const SizedBox(height: 30),
                const TextField(
                  decoration: InputDecoration(
                    labelText: 'Name',
                    border: OutlineInputBorder(
                      borderSide: BorderSide(),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                const TextField(
                  decoration: InputDecoration(
                    labelText: 'Email',
                    border: OutlineInputBorder(
                      borderSide: BorderSide(),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                IntlMobileField(
                  favorite: const ['BD', 'US', 'MY'],
                  favoriteIcon: Icon(
                    Icons.star,
                    color: Colors.amber,
                  ),
                  favoriteIconIsLeft: false,
                  decoration: const InputDecoration(
                    labelText: 'Mobile Number',
                    border: OutlineInputBorder(
                      borderSide: BorderSide(),
                    ),
                  ),
                  initialCountryCode: 'BD',
                  disableLengthCounter: true,
                  languageCode: "en",
                  onChanged: (mobile) {
                    log(mobile.completeNumber);
                  },
                  onCountryChanged: (country) {
                    log('Country changed to: ${country.name}');
                  },
                ),
                const SizedBox(
                  height: 10,
                ),
                Center(
                  child: SizedBox(
                    height: 50,
                    width: double.infinity,
                    child: MaterialButton(
                      shape: ContinuousRectangleBorder(
                          borderRadius: BorderRadius.circular(15)),
                      color: Colors.blue,
                      textColor: Colors.white,
                      onPressed: () {
                        log(controller.text);
                        _formKey.currentState?.validate();
                      },
                      child: const Text(
                        'Submit',
                        style: TextStyle(
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

以上是关于intl_mobile_field插件的详细使用说明，希望对您有所帮助！如果您有任何问题或建议，欢迎随时提出。