Flutter印度卢比输入格式化插件rupee_textfield的使用

RupeeTextField Package

rupee_textfield 包为Flutter应用程序提供了通过 TextFormField 格式化货币输入的简单方法。它包括对货币符号的自定义选项，并提供了方便的字符串扩展以用于格式化和解析货币值。

特性

• 货币输入格式化：与 TextFormField 集成，以格式化输入为货币。
• 可定制的货币符号：设置并显示特定的货币符号（例如：₹、$、€、£）。
• 字符串扩展：
  • toUnFormattedString()：将格式化的货币字符串转换为普通字符串。
  • toUnFormattedInt()：将格式化的货币字符串转换为整数。

开始使用

要将 rupee_textfield 包集成到您的Flutter应用程序中，请按照以下步骤操作：

1. 添加依赖项

在您的 pubspec.yaml 文件中添加 rupee_textfield 依赖项：

dependencies:
  flutter:
    sdk: flutter
  rupee_textfield: ^0.0.3

然后运行 flutter pub get 来安装包。

2. 使用 RupeeTextField

导入包并在应用中使用 RupeeTextField 小部件：

import 'package:rupee_textfield/rupee_textfield.dart'; // 导入包

在您的 TextFormField 中使用 RupeeTextField：

RupeeTextField(
  controller: controller, // 使用 TextEditingController
  decoration: InputDecoration(
      hintText: 'Enter Amount', // 提示文本
      fillColor: Colors.blue.withOpacity(0.1), // 输入框背景颜色
      filled: true, // 填充背景
      border: const OutlineInputBorder(
          borderSide: BorderSide.none, // 移除边框
          borderRadius: BorderRadius.all(Radius.circular(15))), // 圆角
  ),
  onChanged: (value) { // 监听输入变化
    print('输入值: $value');
  },
  validator: (value) { // 表单验证
    return value.isEmpty ? "Amount can't be empty" : null;
  },
),

3. 获取未格式化的字符串或整数值

通过 RupeeTextField 的控制器获取未格式化的值：

// 获取未格式化的字符串值
String unformattedString = controller.text.toUnFormattedString(); // e.g., "80000"

// 获取未格式化的整数值
int unformattedInt = controller.text.toUnFormattedInt(); // e.g., 80000

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用 rupee_textfield：

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

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

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

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

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

  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final TextEditingController controller = TextEditingController();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RupeeTextField 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            RupeeTextField(
              controller: controller,
              decoration: InputDecoration(
                  hintText: 'Enter Amount',
                  fillColor: Colors.blue.withOpacity(0.1),
                  filled: true,
                  border: const OutlineInputBorder(
                      borderSide: BorderSide.none,
                      borderRadius: BorderRadius.all(Radius.circular(15)))),
              onChanged: (value) {
                print('输入值: $value');
              },
              validator: (value) {
                return value.isEmpty ? "Amount can't be empty" : null;
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 获取未格式化的值
                String unformattedString = controller.text.toUnFormattedString();
                int unformattedInt = controller.text.toUnFormattedInt();

                // 打印结果
                print('未格式化的字符串: $unformattedString');
                print('未格式化的整数: $unformattedInt');
              },
              child: Text('获取未格式化值'),
            )
          ],
        ),
      ),
    );
  }
}