Flutter电话号码选择插件phone_number_picker的使用

Flutter电话号码选择插件phone_number_picker的使用

mobile_number_picker 是一个用于简化从用户设备获取电话号码提示的 Flutter 插件。它利用了由 Google Play 服务支持的电话号码提示 API,可以无缝地显示用户的 SIM 卡电话号码作为提示。

特性

  • 无需额外权限:该插件不需要任何额外的权限请求,确保了流畅的用户体验。
  • 消除手动输入:用户不再需要手动输入他们的电话号码,减少了输入错误并节省了时间。
  • 无需谷歌账户:使用电话号码提示 API 不需要谷歌账户,增强了可访问性。
  • 不绑定于登录/注册流程mobile_number_picker 提供的功能不仅限于登录或注册流程,提供了应用的灵活性。
  • 广泛的安卓版本支持:与自动填充解决方案相比,该插件在各种安卓版本上具有更广泛的兼容性。

DEMO

TODO: 链接到演示 GIF

开始使用

安装

要将 mobile_number_picker 集成到您的 Flutter 项目中,只需将其添加为 pubspec.yaml 文件中的依赖项:

dependencies:
  mobile_number_picker: ^0.0.8

然后运行 flutter pub get 来安装该插件。

示例

以下是一个完整的示例,展示了如何使用 mobile_number_picker 插件来获取用户的电话号码。

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

import 'package:flutter/services.dart';
import 'package:mobile_number_picker/mobile_number_picker.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _phoneNumber;
  final _simNumberPickerPlugin = MobileNumberPicker();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  Future<void> getPhoneNumbers() async {
    SimPicker? simPicker;
    try {
      simPicker = await _simNumberPickerPlugin.getMobileNumbers();
    } on PlatformException {
      simPicker = null;
    }

    // 如果小部件从树中移除时异步平台消息还在飞行,则我们希望丢弃回复而不是调用 setState 来更新我们的非存在外观。
    if (!mounted) return;

    setState(() {
      switch (simPicker) {
        case SimPickerSuccessState():
          _phoneNumber = (simPicker.data as SimNumber).data;
        case SimPickerErrorState():
          _phoneNumber = simPicker.errorMessage;
        default:
          _phoneNumber = "";
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(child: _body2()),
      ),
    );
  }

  Widget _body2() {
    return InkWell(
      child: Container(
        width: 300,
        height: 100,
        decoration: BoxDecoration(
            color: Colors.yellow, borderRadius: BorderRadius.circular(8)),
        child: Center(
            child: Text(
              'Phone number: ${(_phoneNumber)}',
            )),
      ),
      onTap: () {
        getPhoneNumbers();
      },
    );
  }
}

更多关于Flutter电话号码选择插件phone_number_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter电话号码选择插件phone_number_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于在Flutter中使用phone_number_picker插件来实现电话号码选择功能,以下是一个简单的代码示例,展示了如何集成和使用这个插件。

首先,你需要在pubspec.yaml文件中添加phone_number_picker依赖:

dependencies:
  flutter:
    sdk: flutter
  phone_number_picker: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Dart文件中,你可以按照以下方式使用PhoneNumberPicker

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Phone Number Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedPhoneNumber = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phone Number Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Phone Number: $selectedPhoneNumber',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final result = await showDialog<String>(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('Select Phone Number'),
                      content: SingleChildScrollView(
                        child: PhoneNumberPicker(
                          initialSelection: 'US', // 可选:初始选择的国家代码
                          favorite: ['+1', '+86'], // 可选:收藏的国家代码列表
                          onChanged: (phoneNumber) {
                            // 这里可以处理实时更新的电话号码
                          },
                        ),
                      ),
                      actions: <Widget>[
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('Cancel'),
                        ),
                        TextButton(
                          onPressed: () async {
                            final pickedPhoneNumber = await PhoneNumberPicker.getSelectedPhoneNumber();
                            Navigator.of(context).pop(pickedPhoneNumber);
                          },
                          child: Text('OK'),
                        ),
                      ],
                    );
                  },
                );

                if (result != null) {
                  setState(() {
                    selectedPhoneNumber = result;
                  });
                }
              },
              child: Text('Select Phone Number'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明:

  1. 依赖添加:在pubspec.yaml中添加phone_number_picker依赖。
  2. UI结构
    • 使用Scaffold构建页面结构。
    • 使用Text显示当前选择的电话号码。
    • 使用ElevatedButton触发电话号码选择对话框。
  3. 对话框
    • 使用showDialog显示一个包含PhoneNumberPickerAlertDialog
    • PhoneNumberPicker组件允许用户选择国家代码和电话号码。
    • onChanged回调可用于实时处理电话号码的变化(可选)。
    • 对话框有两个按钮:取消和确定。确定按钮会获取选中的电话号码并关闭对话框。
  4. 状态更新:当用户选择电话号码并点击确定后,更新页面上的显示。

请确保你使用的是最新版本的phone_number_picker插件,并根据需要调整代码。如果有任何API变化,请参考插件的官方文档。

回到顶部