web3mq_ui_components 是一个用于 Flutter 的 UI 组件库，专门为 Web3 应用程序设计。它提供了一系列预构建的组件，帮助开发者快速构建与区块链和 Web3 相关的用户界面。以下是如何使用 web3mq_ui_components 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  web3mq_ui_components: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 web3mq_ui_components：

import 'package:web3mq_ui_components/web3mq_ui_components.dart';

3. 使用组件

web3mq_ui_components 提供了多种 UI 组件，以下是一些常见组件的使用示例：

3.1 钱包连接按钮

Web3ConnectButton(
  onPressed: () {
    // 处理钱包连接逻辑
  },
  child: Text('Connect Wallet'),
);

3.2 交易状态指示器

Web3TransactionStatusIndicator(
  status: Web3TransactionStatus.pending,
  onRetry: () {
    // 处理重试逻辑
  },
);

3.3 代币余额显示

Web3TokenBalance(
  tokenName: 'ETH',
  balance: '1.234',
  onRefresh: () {
    // 处理刷新余额逻辑
  },
);

3.4 NFT 卡片

Web3NFTCard(
  imageUrl: 'https://example.com/nft-image.png',
  title: 'My NFT',
  description: 'This is a description of my NFT.',
  onTap: () {
    // 处理 NFT 点击逻辑
  },
);

4. 自定义主题

web3mq_ui_components 允许你自定义主题以匹配你的应用程序风格。你可以通过 Web3Theme 来设置全局主题：

MaterialApp(
  theme: ThemeData(
    // 自定义主题
  ),
  home: Web3Theme(
    data: Web3ThemeData(
      primaryColor: Colors.blue,
      secondaryColor: Colors.green,
      // 其他自定义主题属性
    ),
    child: MyHomePage(),
  ),
);

5. 处理 Web3 逻辑

虽然 web3mq_ui_components 提供了 UI 组件，但你需要自己处理与 Web3 相关的逻辑，例如钱包连接、交易签名等。你可以使用 web3dart 或其他 Web3 库来处理这些逻辑。

6. 示例代码

以下是一个简单的示例，展示了如何使用 web3mq_ui_components 构建一个基本的 Web3 应用程序界面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Web3Theme(
        data: Web3ThemeData(
          primaryColor: Colors.blue,
          secondaryColor: Colors.green,
        ),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Web3 App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Web3ConnectButton(
              onPressed: () {
                // 处理钱包连接逻辑
              },
              child: Text('Connect Wallet'),
            ),
            SizedBox(height: 20),
            Web3TokenBalance(
              tokenName: 'ETH',
              balance: '1.234',
              onRefresh: () {
                // 处理刷新余额逻辑
              },
            ),
            SizedBox(height: 20),
            Web3NFTCard(
              imageUrl: 'https://example.com/nft-image.png',
              title: 'My NFT',
              description: 'This is a description of my NFT.',
              onTap: () {
                // 处理 NFT 点击逻辑
              },
            ),
          ],
        ),
      ),
    );
  }
}