Flutter比特币界面展示插件bitcoin_ui的使用

Flutter比特币界面展示插件bitcoin_ui的使用

这是Bitcoin UI Kit的Flutter实现。

开始使用

在你的pubspec.yaml文件中添加依赖：

dependencies:
  bitcoin_ui: ^2.0.0

然后运行flutter pub get来获取该包。

使用

在你想要使用它的Dart文件中导入：

import 'package:bitcoin_ui/bitcoin_ui.dart';

颜色

浅色主题的主要和强调颜色

// 浅色主题的主要和强调颜色
Bitcoin.orange
Bitcoin.red
Bitcoin.green
Bitcoin.blue
Bitcoin.purple

// 浅色主题的中性颜色
Bitcoin.white
Bitcoin.neutral1
Bitcoin.neutral2
Bitcoin.neutral3
Bitcoin.neutral4
Bitcoin.neutral5
Bitcoin.neutral6
Bitcoin.neutral7
Bitcoin.neutral8
Bitcoin.black

深色主题的主要和强调颜色

// 深色主题的主要和强调颜色
Bitcoin.orangeDark
Bitcoin.redDark
Bitcoin.greenDark
Bitcoin.blueDark
Bitcoin.purpleDark

// 深色主题的中性颜色
Bitcoin.neutral1Dark
Bitcoin.neutral2Dark
Bitcoin.neutral3Dark
Bitcoin.neutral4Dark
Bitcoin.neutral5Dark
Bitcoin.neutral6Dark
Bitcoin.neutral7Dark
Bitcoin.neutral8Dark

文本样式

有五种标题样式和五种正文样式，每种样式都有一个颜色参数。

// 标题样式
BitcoinTextStyle.title1(Bitcoin.black)
BitcoinTextStyle.title2(Bitcoin.black)
BitcoinTextStyle.title3(Bitcoin.black)
BitcoinTextStyle.title4(Bitcoin.black)
BitcoinTextStyle.title5(Bitcoin.black)

// 正文样式
BitcoinTextStyle.body1(Bitcoin.black)
BitcoinTextStyle.body2(Bitcoin.black)
BitcoinTextStyle.body3(Bitcoin.black)
BitcoinTextStyle.body4(Bitcoin.black)
BitcoinTextStyle.body5(Bitcoin.black)

按钮

UI Kit中有三种样式的按钮：

  • BitcoinButtonFilled
  • BitcoinButtonOutlined
  • BitcoinButtonPlain

它们都有一些可选参数，例如textStyle、width、height、tintColor（对于BitcoinButtonFilled）、textColor、cornerRadius，并可以设置disabled和isLoading状态。默认情况下，它们使用Flutter主题的颜色，并且是胶囊形状，但可以通过覆盖这些属性来改变。

BitcoinButtonFilled(
  title: "Filled",
  onPressed: () {
    debugPrint("Test button press");
  }
),

图标

大多数来自Bitcoin Icons的图标都包含在内。

Image(
    image: const AssetImage("icons/bitcoin_circle.png",
    package: "bitcoin_ui_kit"),
    color: Bitcoin.orange),

其他信息

更多详细信息可以在Bitcoin UI Kit找到。

完整示例

以下是一个完整的示例，展示了如何使用bitcoin_ui插件创建一个简单的比特币界面。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bitcoin UI Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用浅色主题的橙色
              Text(
                "Bitcoin Title",
                style: BitcoinTextStyle.title1(Bitcoin.orange),
              ),
              Text(
                "Bitcoin Body",
                style: BitcoinTextStyle.body1(Bitcoin.orange),
              ),
              
              // 使用深色主题的红色按钮
              BitcoinButtonFilled(
                title: "Filled Button",
                onPressed: () {
                  debugPrint("Button pressed");
                },
                backgroundColor: Bitcoin.redDark,
                textColor: Bitcoin.white,
              ),
              
              // 使用图标
              Image(
                image: const AssetImage("icons/bitcoin_circle.png",
                    package: "bitcoin_ui_kit"),
                color: Bitcoin.orange,
                width: 50,
                height: 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter比特币界面展示插件bitcoin_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter比特币界面展示插件bitcoin_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


bitcoin_ui 是一个 Flutter 插件，旨在帮助开发者快速构建与比特币相关的用户界面。它提供了一些预构建的组件和小部件，可以轻松地集成到你的 Flutter 应用中，用于展示比特币相关的信息，如余额、交易历史、地址等。

安装 bitcoin_ui

首先，你需要在 pubspec.yaml 文件中添加 bitcoin_ui 依赖：

dependencies:
  flutter:
    sdk: flutter
  bitcoin_ui: ^0.1.0  # 请查看最新版本

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

使用 bitcoin_ui

以下是一些常见的用法示例：

1. 展示比特币余额

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

class BitcoinBalanceWidget extends StatelessWidget {
  final double balance;

  BitcoinBalanceWidget({required this.balance});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BitcoinBalance(
      balance: balance,
      currencySymbol: 'BTC',
      style: BitcoinBalanceStyle(
        balanceTextStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        currencyTextStyle: TextStyle(fontSize: 18, color: Colors.grey),
      ),
    );
  }
}

2. 展示比特币地址

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

class BitcoinAddressWidget extends StatelessWidget {
  final String address;

  BitcoinAddressWidget({required this.address});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BitcoinAddress(
      address: address,
      style: BitcoinAddressStyle(
        addressTextStyle: TextStyle(fontSize: 16, color: Colors.blue),
        copyIcon: Icon(Icons.copy, size: 20),
      ),
      onCopy: () {
        // 处理复制地址的逻辑
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Address copied to clipboard')),
        );
      },
    );
  }
}

3. 展示比特币交易历史

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

class BitcoinTransactionHistoryWidget extends StatelessWidget {
  final List<BitcoinTransaction> transactions;

  BitcoinTransactionHistoryWidget({required this.transactions});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BitcoinTransactionHistory(
      transactions: transactions,
      style: BitcoinTransactionHistoryStyle(
        transactionTextStyle: TextStyle(fontSize: 14),
        dateTextStyle: TextStyle(fontSize: 12, color: Colors.grey),
      ),
      onTransactionTap: (transaction) {
        // 处理交易点击事件
        print('Transaction tapped: ${transaction.txid}');
      },
    );
  }
}
回到顶部