Flutter货币格式化与装饰插件currency_decoration的使用

Flutter货币格式化与装饰插件currency_decoration的使用

预览

currency_decoration_2

安装

在你的pubspec.yaml文件中添加currency_decoration作为依赖。

dependencies:
    currency_decoration: ^1.0.1+1

使用

以下是一个使用CurrencyDecoration进行货币格式化的示例：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Currency decoration',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            margin: const EdgeInsets.all(20.0),
            child: Column(
              children: [
                example_1(context),
                const SizedBox(
                  height: 70.0,
                ),
                const CurrencyDecoration(
                  symbol: CurrencySymbol.USD,
                  amount: 134000,
                  compact: true,
                  symbolAlign: SymbolAlign.left,
                  fractionDigits: 2,
                  enforceDecimals: false,
                  currencyValuePlaceStyle: CurrencyValuePlaceStyle.style2,
                  primaryTextStyle: TextStyle(
                      color: Colors.deepOrangeAccent,
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0),
                ),
                const SizedBox(
                  height: 50.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    CurrencyDecoration(
                      symbol: CurrencySymbol.USD,
                      amount: 746722,
                      enforceDecimals: false,
                      currencyValuePlaceStyle: CurrencyValuePlaceStyle.style2,
                      fractionalStyle: FractionalStyle.cross,
                      primaryTextStyle: TextStyle(
                          color: Colors.pinkAccent,
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0),
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    CurrencyDecoration(
                      symbol: "Rs.",
                      amount: 79.99,
                      symbolAlign: SymbolAlign.left,
                      fractionDigits: 2,
                      enforceDecimals: false,
                      currencyValuePlaceStyle: CurrencyValuePlaceStyle.style2,
                      primaryTextStyle: TextStyle(
                          color: Colors.lime,
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 50.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    CurrencyDecoration(
                      symbol: CurrencySymbol.USD,
                      amount: 99.09,
                      currencyValuePlaceStyle: CurrencyValuePlaceStyle.style1,
                      fractionalStyle: FractionalStyle.cross,
                      primaryTextStyle: TextStyle(
                          color: Colors.deepOrangeAccent,
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0),
                      secondaryTextStyle: TextStyle(fontSize: 14.0),
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    CurrencyDecoration(
                      symbol: CurrencySymbol.CNY,
                      amount: 746722,
                      symbolAlign: SymbolAlign.left,
                      fractionDigits: 0,
                      enforceDecimals: false,
                      currencyValuePlaceStyle: CurrencyValuePlaceStyle.style2,
                      primaryTextStyle: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 70.0,
                ),
                Row(
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(10.0),
                            child: SizedBox.fromSize(
                              child: Image.network(
                                  "https://cdn.shopify.com/s/files/1/0666/2081/7620/products/CFSC4024BEIGE-1-_1_400x.jpg?v=1665729610",
                                  fit: BoxFit.cover),
                            ),
                          ),
                          const SizedBox(
                            height: 10.0,
                          ),
                          const Text(
                            "FORT COLLINS",
                            style: TextStyle(
                                fontSize: 14.0,
                                color: Colors.white,
                                fontWeight: FontWeight.w500),
                          ),
                          const SizedBox(
                            height: 5.0,
                          ),
                          const Text(
                            "Striped Slim Fit Shirt\n",
                            style: TextStyle(
                                fontSize: 12.0, color: Colors.white60),
                          ),
                          const SizedBox(
                            height: 10.0,
                          ),
                          CurrencyDecoration(
                            symbol: CurrencySymbol.INR,
                            amount: 699.99,
                            symbolAlign: SymbolAlign.left,
                            fractionDigits: 2,
                            enforceDecimals: false,
                            currencyValuePlaceStyle:
                                CurrencyValuePlaceStyle.style2,
                            primaryTextStyle: const TextStyle(
                                color: Colors.blueAccent,
                                fontWeight: FontWeight.w600,
                                fontSize: 16.0),
                            secondaryTextStyle: TextStyle(
                                color: Colors.blueAccent.withOpacity(0.8),
                                fontWeight: FontWeight.w600,
                                fontSize: 12.0),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(
                      width: 15.0,
                    ),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(10.0),
                            child: SizedBox.fromSize(
                              child: Image.network(
                                  "https://cdn.shopify.com/s/files/1/0666/2081/7620/products/CFDH3066BROWN_1_700x.jpg?v=1665480558",
                                  fit: BoxFit.cover),
                            ),
                          ),
                          const SizedBox(
                            height: 10.0,
                          ),
                          const Text(
                            "DENNISLINGO PREMIUM",
                            style: TextStyle(
                                fontSize: 14.0,
                                color: Colors.white,
                                fontWeight: FontWeight.w500),
                          ),
                          const SizedBox(
                            height: 5.0,
                          ),
                          const Text(
                            "Full Sleeves Slim Fit Classic Shirt",
                            style: TextStyle(
                                fontSize: 12.0, color: Colors.white60),
                          ),
                          const SizedBox(
                            height: 10.0,
                          ),
                          CurrencyDecoration(
                            symbol: CurrencySymbol.USD,
                            amount: 29.99,
                            symbolAlign: SymbolAlign.left,
                            fractionDigits: 2,
                            enforceDecimals: false,
                            currencyValuePlaceStyle:
                                CurrencyValuePlaceStyle.style2,
                            primaryTextStyle: const TextStyle(
                                color: Colors.blueAccent,
                                fontWeight: FontWeight.w600,
                                fontSize: 16.0),
                            secondaryTextStyle: TextStyle(
                                color: Colors.blueAccent.withOpacity(0.8),
                                fontWeight: FontWeight.w600,
                                fontSize: 12.0),
                          ),
                        ],
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget example_1(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.black26,
        borderRadius: BorderRadius.all(
          Radius.circular(8.0),
        ),
      ),
      padding: const EdgeInsets.all(15.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                "Payable amount is",
                style: TextStyle(color: Colors.white54, fontSize: 11.0),
              ),
              const SizedBox(
                height: 6.0,
              ),
              CurrencyDecoration(
                symbol: CurrencySymbol.USD,
                amount: 28945.6778,
                symbolSeparator: ' ',
                symbolAlign: SymbolAlign.left,
                fractionDigits: 2,
                currencyValuePlaceStyle: CurrencyValuePlaceStyle.style2,
                primaryTextStyle: const TextStyle(
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                    fontSize: 18.0),
                secondaryTextStyle: TextStyle(
                    color: Colors.green.shade800,
                    fontWeight: FontWeight.bold,
                    fontSize: 14.0),
                symbolTextStyle: const TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          TextButton(
              onPressed: () {},
              style: ButtonStyle(
                  backgroundColor: MaterialStateColor.resolveWith(
                      (states) => Colors.black45)),
              child: Text(
                "  Pay Now  ",
                style: TextStyle(
                  color: Colors.pink.shade600,
                ),
              )),
        ],
      ),
    );
  }
}

参数

参数名 描述
key 控制树中的小部件。
amount* 小数值或整数值。
symbol* 货币符号，默认接受如USD或INR等字符串值。
symbolAlign 货币符号的对齐方式，默认为SymbolAlign.left。
thousandSeparator 千分位分隔符。例如：1,000,000 (',') 或 1.000.000 ('.')。
decimalSeparator 小数点分隔符。例如：9.10 ('.') 或 9,10 (',')。
symbolSeparator 金额和货币符号之间的字符。例如：$ 9.10 (' ') 或 $9.10 ('')。
enforceDecimals 如果设置为true，即使它是整数也会显示小数。例如：'$ 5.00'而不是'$ 5'。
showThousandSeparator 千分位分隔符。例如：1,000,000 (',') 或 1.000.000 ('.')。
compact 如果设置为true，将使用紧凑形式。例如：'$ 1.23K'而不是'$ 1,230'。
primaryTextStyle 应用于整个单位/值（例如52470.596时应用于52470）的文本样式。如果未定义，则使用DefaultTextStyle.of(context)作为默认样式。
secondaryTextStyle 应用于小数部分（例如52470.596时应用于596）的文本样式。如果未定义，则使用primaryTextStyle作为默认样式。
symbolTextStyle 应用于货币符号的文本样式。如果未定义，则使用primaryTextStyle作为默认样式。
currencyValuePlaceStyle 整个单位/值的逗号样式。
fractionalStyle 小数部分/值的样式。
fractionDigits 小数部分的位数。

标记为*的参数是必须提供的。

许可证

MIT许可证

版权所有 (c) 2023 Anand Patel

特此免费许可任何人获得本软件及其关联文档文件（"软件"）的副本，
以不受限制地处理软件，包括但不限于使用、复制、修改、合并、发布、分发、再授权和/或出售软件的副本，并允许他人根据以下条件使用该软件：
上述版权声明和本许可通知应包含在所有副本或软件的重要部分中。

软件按"原样"提供，不附带任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权的保证。
在任何情况下，作者或版权持有者均不对因软件或软件的使用或其他行为引起的任何索赔、损害或其他责任负责。

更多关于Flutter货币格式化与装饰插件currency_decoration的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter货币格式化与装饰插件currency_decoration的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用currency_decoration插件来进行货币格式化和装饰的示例代码。这个插件可以帮助你轻松地将数值转换为格式化的货币字符串，并在UI中以美观的方式展示。

首先，确保你已经在pubspec.yaml文件中添加了currency_decoration依赖：

dependencies:
  flutter:
    sdk: flutter
  currency_decoration: ^最新版本号  # 请替换为当前最新版本号

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

接下来是一个完整的示例代码，展示如何使用currency_decoration插件：

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

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

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

class MyHomePage extends StatelessWidget {
  final double amount = 1234567.89;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Currency Decoration Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用 CurrencyText 小部件
            CurrencyText(
              amount,
              currency: Currency(symbol: 'USD', decimalDigits: 2, locale: 'en_US'),
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            // 使用自定义装饰的 Text 小部件
            Text.rich(
              TextSpan(
                text: '${amount.toStringAsFixed(2)}',
                style: TextStyle(fontSize: 24),
                children: <TextSpan>[
                  TextSpan(
                    text: ' USD',
                    style: TextStyle(
                      color: Colors.grey,
                      decoration: TextDecoration.underline,
                      decorationStyle: TextDecorationStyle.solid,
                    ),
                  ),
                ],
              ),
            ).currencyDecoration(
              currency: Currency(symbol: 'USD', decimalDigits: 2, locale: 'en_US'),
              decorationStyle: CurrencyDecorationStyle(
                color: Colors.blue,
                alignment: Alignment.topRight,
                padding: EdgeInsets.only(top: 4, right: 4),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: Colors.yellow.withOpacity(0.5),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了两种使用currency_decoration插件的方法：

  1. 使用CurrencyText小部件：

    • CurrencyText是一个方便的小部件，它接受一个数值和一个Currency对象，并自动将其格式化为货币字符串。

  2. 使用Text.rich和.currencyDecoration扩展方法：

    • 这种方法允许你首先创建一个自定义格式的Text小部件，然后使用.currencyDecoration扩展方法为其添加装饰。

请注意，.currencyDecoration扩展方法可能并不是currency_decoration插件实际提供的方法，这里是为了展示如何可以自定义装饰效果。如果插件不支持直接扩展Text，你可能需要创建一个自定义的小部件来实现类似的效果。

另外，确保你查阅了currency_decoration插件的最新文档，以获取最新的使用方法和API变化。

回到顶部