Flutter多消息发送插件multi_sender_pinput的使用

🌍 关于项目

本插件用于在所有平台上发送多条消息。

🛠 构建工具

• smart_auth: SmartAuth
• universal_platform: UniversalPlatform

源代码结构

/my_camera
  example/
        lib/
          main.dart
  lib/
    multi_sender_pinput/
                      models/
                      utils/
                      widgets/
        multi_sender_pinput.dart
        pinput.dart    

🧾 设置项目

命名规则

清洁代码

• 创建UI组件库以供通用组件使用。
• 不要直接使用颜色或字体样式，而是使用UI组件库。
• 将小部件拆分为子小部件。
• 为每个功能创建组件包来存储子小部件。
• 指定类成员的类型。
• 使用if条件而不是条件表达式。
• 使用??和?.操作符。
• 使用级联操作符。
• 在小部件中使用Const。

示例代码

以下是一个使用multi_sender_pinput插件的基本示例：

import 'package:flutter/material.dart';
import 'package:multi_sender_pinput/multi_sender_pinput/pinput.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
          title: const Text('Pinput Example'),
          centerTitle: true,
          titleTextStyle: const TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.w600,
            color: Color.fromRGBO(30, 60, 87, 1),
          ),
        ),
        body: const FractionallySizedBox(
          widthFactor: 1,
          child: PinputExample(),
        ),
      ),
    ),
  );
}

/// 这是Pinput的基本用法
/// 更多例子请查看演示目录
class PinputExample extends StatefulWidget {
  const PinputExample({Key? key}) : super(key: key);

  [@override](/user/override)
  State<PinputExample> createState() => _PinputExampleState();
}

class _PinputExampleState extends State<PinputExample> {
  final pinController = TextEditingController();
  final focusNode = FocusNode();
  final formKey = GlobalKey<FormState>();

  [@override](/user/override)
  void dispose() {
    pinController.dispose();
    focusNode.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    const borderColor = Color.fromRGBO(23, 171, 144, 0.4);

    final defaultPinTheme = PinTheme(
      width: 56,
      height: 56,
      textStyle: const TextStyle(
        fontSize: 22,
        color: Color.fromRGBO(30, 60, 87, 1),
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(19),
        border: Border.all(color: borderColor),
      ),
    );

    /// 你可以选择使用表单来验证Pinput
    return Form(
      key: formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Directionality(
            // 指定方向（如果需要）
            textDirection: TextDirection.ltr,
            child: Pinput(
              defaultPinTheme: defaultPinTheme,
              scrollPadding: const EdgeInsets.all(56),
              focusNode: focusNode,
              autofocus: true,
              closeKeyboardWhenCompleted: false,
              // readOnly: true,
              autofillHints: const [AutofillHints.oneTimeCode],
              controller: pinController,
              length: 6,
              androidSmsAutofillMethod: AndroidSmsAutofillMethod.smsUserConsentApi,
              listenForMultipleSmsOnAndroid: true,
              senderPhoneNumber: const ['+989385371961', '+989398216784', '+989122331488'],
              textInputAction: TextInputAction.done,
              showCursor: false,
              keyboardType: TextInputType.number,
              animationCurve: Curves.ease,
              animationDuration: const Duration(milliseconds: 300),
              pinAnimationType: PinAnimationType.slide,
              smsPermissionStatus: (value) {
                debugPrint('Sms Permission Status: $value');
              },
              showSimpleTextField: true,
              readFromSms: true,
              onChanged: (value) {
                print('onChanged: $value');
              },
              onCompleted: (value) {
                print('onCompleted: $value');
              },
              autoFillValidation: (line) {
                return (line.contains('رمز') || line.contains('بلیت') || line.contains('بليت')) &&
                    !line.contains('زمان');
              },
              showPermissionDialog:(){
                return showDialog<void>(context: context, builder: (BuildContext context) { 
                  return Container(
                    color: Colors.white,
                    height: 300,
                    width: 300,
                    child: Center(
                      child: Text('Test'),
                    ),
                  );
                });
              },
            ),
          ),
          TextButton(
            onPressed: () {
              focusNode.unfocus();
              formKey.currentState!.validate();
            },
            child: const Text('Validate'),
          ),
        ],
      ),
    );
  }
}